vscode配置 | 插件

工欲善其事，必先利其器

1、vscode代码块设置

提前设置实用代码块，可大大减少开发的时间！

具体设置、代码及使用方式，可前往查看 --> 【自定义代码块】

2. vscode插件【强烈推荐】

2.1 vsCode 设置为中文语言

方式一：
安装插件:
Chinese (Simplified) Language Pack for Visual Studio Code

方式二：
输入快捷键：
Cmd+Shift+P
or

输入：Configure Display Language

选择：zh-cn

2.2 保存后自动格式化代码

1.选择设置

2. 搜索editor.formatOnSave并勾选

2.3. 编写markdown文件并预览

右击.md文件 选择预览

默认界面比较简介，所以我一般换装两个插件：
Markdown Preview Github Styling&& Markdown Preview Enhanced
使用插件后，效果如下：

2.4.git神器 GitLens

将光标放置在代码的当前行，可以看到这样代码的提交者是谁，以及提交时间。这一点，是 GitLens 最便捷的功能。

• 查看某个 commit 的代码改动记录
• 查看不同的分支
• 可以将两个 commit 进行代码对比
• 可以将两个 branch 分支进行整体的代码对比

2.5. Bracket Pair Colorizer 2：成对括号特别标识

2.6.highlight-icemode：选中相同的代码时，让高亮显示更加明显

2.7.TODO Highlight ：TODO标识

以特别的文字颜色来区分开和普通代码，可以让你一眼就看到TODO代办

2.8.Vetur :vue 开发神器

Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。

2.9.ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/react-router 的语法智能提示

2.10. Prettier :代码格式化

Prettier 是一个代码格式化工具，只关注格式化，但不具备校验功能
一个好的格式化代码格式，可以让人更加清晰明了的看清代码！！！

2.11.Beautify

代码格式化工具。

2.12. ESLint：代码格式校验

日常开发中，建议用可以用 Prettier 做代码格式化，然后用 eslint 做校验。

2.13. JavaScript(ES6) code snippets

ES6 语法智能提示，支持快速输入。

2.14.indent-rainbow：突出显示代码缩进

indent-rainbow插件：色彩背景突出显示代码缩进。

2.15.Code Spell Checker：单词拼写错误检查

这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名

可以快速的检测出是否有单词错误，避免一些名称不统一的错误。

2.16. Auto Close Tag、Auto Rename Tag

自动闭合标签、自动对标签重命名

2.17.Better Comments：华丽的各种注释

为注释添加更醒目、带分类的色彩

2.18.CSS Peek

增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式
使用方式： 按住 CTRL + 移到鼠标到要查看样式的类上就可以看到该类的定义了

2.19. Import Cost:引入包大小计算,对于项目打包后体积掌握很有帮助

2.20. CSScomb : CSS 书写顺序规则

可根据个人喜好设置

2.21 javascript console utils（快速打印console日志）

【参考地址】

相信打印日志是开发者的一个高频的操作。

正常的操作是先敲出console.log(),在进行变量的赋值操作，最后去控制台进行查看日志。一天下来可能会重复很多次该操作，那么就会很无奈，和烦躁。

诶，有一个插件可以快速进行日志的打印，别人都在用了，你还在等什么？

使用方式：
1.鼠标选择需要打印的内容或者变量
2.mac用户按住 shift+command+L
windows用户按住shift+ctrl+L
然后就会在下一行生成如下代码： console.log('abcd:', abcd);

这个插件还提供一个快捷键shift+command+D，一键删除本页面所有console.log日志信息，也很常用，不过要慎用哦！

2.22 project-tree（快速将文件目录追加进Readme.md）

安装插件：

使用步骤：

1. 删除 node_modules，不然数据会大到你怀疑人生
2. 组合键： shift + command / ctrl + p , 输入 >Project Tree
3. 稍等片刻，打开README.md（如何文件不存在，会自动帮你创建）文件，即可看到目录

2.23 koroFileHeader（快速在vscode中用于生成文件头部注释和函数注释的插件）

1. 安装插件
2. 个性化配置

首选项 -> 设置 -> 搜索 fileheader -> 个性化代码配置

个性化代码配置 【更多配置项】

// 头部注释默认字段
    "Author": "Bonnie",
    "Date": "Do not edit", // 设置后默认设置文件生成时间
    "LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
    "LastEditors": "Bonnie", // 设置后，保存文件更改默认更新最后编辑人
    "Description": "",
    "FilePath": "Do not edit", // 设置后，默认生成文件相对于项目的路径
    "custom_string_obkoro1": "可以输入预定的版权声明、个性签名、空行等"

新建文件，保存即可出现