VS Code：让你工作效率翻倍的插件和编辑技巧

总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来。

外观

主题

这里我分享两款主题：

1. Material Theme

效果如图：

Material Theme

1. An Old Hope Theme

效果如图：

An Old Hope Theme

图标

1. Material Icon Theme 当然，这两款主题的文件管理器（左侧）的 icon 小图标使用的是 Material Icon Theme

字体及其他

其他和外观相关的设置如下：

{ "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": false, "workbench.activityBar.visible": false, "workbench.iconTheme": "eq-material-theme-icons-darker", "workbench.colorCustomizations": {}, "materialTheme.cache.workbench.settings": { "themeColours": "Darker", "accentPrevious": "Acid Lime" }, "workbench.colorTheme": "Material Theme Darker", "material-icon-theme.angular.iconsEnabled": true, "material-icon-theme.folders.icons": "specific", "editor.lineHeight": 24, "editor.fontLigatures": true, "editor.fontFamily": "FiraCode-Medium" } 复制代码

特别注意的是"editor.lineHeight": 24,和"editor.fontFamily": "FiraCode-Medium"。

"editor.lineHeight": 24,： 设置代码的行间距，这里比默认的稍大些，就这一点小小的改变，让代码看起来清爽整洁。

"editor.fontFamily": "FiraCode-Medium"： 设置字体，这种字体会让代码看起来更形象生动，如下

FiraCode-Medium字体

红色竖线左边是使用了 FiraCode-Medium 字体的效果，红色竖线右边是没有使用 FiraCode-Medium 字体的效果

关于 FiraCode-Medium 字体更多效果可查阅 github.com/tonsky/Fira… 地址。

代码管理

格式化

1. Beautify ：格式化的时候，给出格式化文本选项，如下

Beautify

1. Prettier ：个人比较喜欢这个，看起来代码更清晰，如下

Prettier

当然，大家可以自定义快捷键，也可以按⌘-⇧-P来搜索相关命令

代码检查

1. ESLint ：检查js语法规范，你可以使用不同的规范，如 airbnb 、standard 、google。
2. TSLint ：检查typescript语法规范。
3. Stylelint ：检查CSS/SCSS/Less语法规范。
4. Markdownlint ：检查markdown语法规范。

自动补全

以下插件点击链接可以查看gif动图，详细了解具体功能。

1. Emmet ：大家应该很熟悉这个插件了（很好用），VS Code 已经内置了，很到位。
2. Auto Close Tag ：自动闭合html等标签 （）。
3. Auto Rename Tag ：修改html标签时，自动修改闭合标签。
4. Path Intellisense ：自动提示补全路径。

代码片段

1. snippets ：搭建可以自己安装各种代码片段（vue、react、angular等），这里就不列举。

功能扩展

以下的功能扩展插件大部分都有gif动图，可点击链接了解详细功能

1. Bracket Pair Colorizer ：让代码的各种括号呈现不同的颜色。
2. Code Runner ：可以在编辑器里直接运行代码，查看结果。
3. Color Picker ：可以直接在编辑器里打开色板，选择各种模式的颜色。
4. Document This ：可以给函数、类等自动的加上详细的注释。
5. Git History ：方便的查看git版本管理的详细信息。
6. Live Server ：可以一键在本地启动服务器。
7. Settings Sync ：重点介绍下这个插件，如果你有两台电脑（比如，家里和公司）都使用 VS Code ，可是在公司或家里对 VS Code 安装了插件或者修改了配置，回到家或公司又要重新弄一次，这个插件就能解决问题，同步多台电脑设置。

只需要把配置上传到GitHub，在另一个地方下载配置即可，如下

Settings Sync

1. gi ：可以给.gitignore文件添加各种语言忽略文件配置。
2. Polacode ：可以把代码生成图片（有些地方发代码结构会乱也没有代码高亮，这时候就可以生成图片再发）。

免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。