能让你开发效率翻倍的 VSCode 插件配置

工欲善其事必先利其器，软件工程师每天打交道最多的可能就是编辑器了。入行几年来，先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，现在仍高频使用的就是 [VSCode]和 [Vim]了。实际上我在 VSCode 里面安装了 Vim 插件，用 Vim 的按键模式编码，因为自从发现双手不离键盘带来的效率提升之后，就尽可能的不去摸鼠标。

折腾过 Atom 的我，首次试用 VSCode 就有种 Vim 的轻量感，试用之后果断弃坑 Atom。Atom 之前，我还使用过 SublimeText，但它在保存文件时会不时弹出购买授权的弹窗，实在是令人烦恼。

每每上手新的编辑器，我都会根据自己的开发习惯把它调较到理想状态，加上熟悉编辑器各种特性，这个过程通常需要几周的时间。接下来，我就从外观配置、风格检查、编码效率、功能增强等 4 方面来侃侃怎么配置 VSCode 来提高工作幸福感。

外观配置

外观是最先考虑的部分，从配置的角度，无非是配色、图标、字体等，俗话说萝卜白菜各有所爱，我目前的配色、图标、字体从下图基本都能看出来，供大家参考：

![]

配色：[Solarized Dark]，VSCode 已经内置，使用了至少 5 年以上的主题，Vim 下的配置完全相同；
图标：[VSCode Great Icons]，给不同类型的文件配置不同的图标，非常直观；
字体：[Fira Code]，自从发现并开始使用 [Fira Code]，我就再也没多看自其它字体一眼，字体如果比较优雅，尤其是对数学运算符的处理，写代码时你真的会感觉在写诗，哈哈，Fira Code 的安装过程稍微复杂点，但是效果绝对是值当的；

配色、图标、字体以及其他外观配置项具体如下（注意，如果不安装上述插件，部分配置项如果直接使用是无效的）：

{
  "editor.cursorStyle": "block",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 24,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.renderIndentGuides": false,
  "editor.rulers": [120],
  "workbench.colorTheme": "Solarized Dark",
  "workbench.iconTheme": "vscode-great-icons"
}

风格检查

之前我写过一篇在 Git 提交环节保障代码风格的文章：[《使用 husky 和 lint-staged 打造超溜的代码检查工作流》]。如果编辑器在编码时实时给出反馈，对开发者个人而言才是最高效的，在提交时做强制检查只是从团队的视角保证编码风格的规范性和一致性。前端工程师会书写的代码无非是：html、css、Javascript、Markdown、TypeScript、JSON，对应的 Lint 工具就显而易见：

[ESLint]：插件式架构，有多种主流的编码风格规则集可供选择，典型的有 [Airbnb]、[Google] 等，你甚至可以攒个自己的，按下不表；
[StyleLint]，同样插件式架构的样式检查工具，不过我在配置其检查 [react-native] 中 [styled-components]m) 组件样式时确实费了不小的功夫，可以单独写篇文章了；
[TSLint]：TypeScript 目前不是我的主要编程语言，但也早早的准备好了；
[MarkdownLint]：Markdown 如果不合法，可能在某些场合导致解析器异常，因为 Markdown 有好几套标准，在不同标准间部分语法支持可能是不兼容的；

除上面列的 Lint 工具之外，非常值得拥有的还有 [EditorConfig] 插件，几乎所有主流 IDE 都有支持，我们可以通过简单的配置文件在不同团队成员、不同 IDE、不同平台下约定好文件的缩进方式、编码格式，避免出现混乱，下面是我常用的配置：

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2

[{*.yml,*.json}]
indent_style = space
indent_size = 2

有了风格检查，自然就会产生按配置好的风格规则做文件格式化的需求，格式化的工具试用了好多，现在还在用的如下：

[Prettier]，实际上已经是代码格式化的[工具标准]，支持格式化几乎所有的前端代码，并且类似于 EditorConfig 支持用文件来配置格式规则；
[Vetur]，格式化 .vue 文件，包括里面的 CSS、JS，至于模板即 HTML 部分，官方维护者说没有比较好的工具支持，默认是不格式化的；

编码效率

说到编码效率，连续六年几乎每天都编码的我目前最大的感受是：击键的速度越来越跟不上思维的速度，这种情况下，就需要在编码时设置适当的快捷键，组合使用智能建议、代码片段、自动补全来达到速度的最大化。

VSCode 内置的智能建议已经非常强大，不过我对默认的配置做了如下修改，以达到类似于在 Vim 中那样在任何地方都启用智能提示（尤其是注释和字符串里面）：

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
}

接下来，重点说说代码片段和自动补全两个效率提升利器。

代码片段

英文叫做 [Snippets]，市面上主流的编辑器也都支持，其基本思想就是把常见的代码模式抽出来，通过 2~3 个键就能展开 N 行代码，代码片段的积累一方面是根据个人习惯，另一方面是学习社区里面积累出来的好的编码模式，如果觉得不适合你，可以改（找个现有的插件依葫芦画瓢），我常用的代码片段插件如下：

[HTML Snippets]，各种 HTML 标签片段，如果你 Emmet 玩的熟，完全可以忽略这个；
[Javascript (ES6) Code Snippets]，常用的类声明、ES 模块声明、CMD 模块导入等，支持的缩写不下 20 种；
[Javascript Patterns Snippets]，常见的编码模式，比如 IIFE；

自动补全

自动补全本质上和代码片段类似，不过是在特殊场合下以你的键入做为启发式信息提供最有可能要输入的建议，我常用的自动补全工具有：

[Auto Close Tag]，适用于 JSX、Vue、HTML，在打开标签并且键入 </ 的时候，能自动补全要闭合的标签；
[Auto Rename Tag]，适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键；
[Path Intellisense]，文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成；
[npm Intellisense]，NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成；
[IntelliSense for CSS class names]，CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示；
[Emmet]，以前叫做 Zen Coding，我发现后，也是爱不释手，可以把类 CSS 选择符的字符串展开成 HTML 标签，VSCode 已经内置，官方介绍文档[参见]，你需要做的就是熟悉他的语法，并勤加练习；

当然，如果你还用 VSCode 编写其他语言的代码，比如 php，就去市场上搜索 “PHP Intellisense” 好了。

功能增强

在效率提升方面除了上面的代码片段、自动补全之外，我还安装了下面几个插件，方便快速的浏览和理解代码，并且在不同项目之间切换。

[Color Highlight]，识别代码中的颜色，包括各种颜色格式；
[Bracket Pair Colorizer]，识别代码中的各种括号，并且标记上不同的颜色，方便你扫视到匹配的括号，在括号使用非常多的情况下能环节眼部压力，编辑器快捷键固然好用，但是在临近嵌套多的情况下却有些力不从心；
[Project Manager]，项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢；

外观增强

如果说美食需要美器的衬托，优雅美观的代码编辑器会大大提升工程师的编码体验、工作幸福感。

Guides 缩进参考

与内置的缩进参考线不同，[Guides]能够让你通过配置项来修改参考线的颜色、样式、缩进空白的背景色等，如果你愿意折腾，甚至能够配置出类似 [Indent Rainbow]那样风格的参考线。下图是我使用 Solarized Dark 主题时参考线的配置：

{
    "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
    "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
    "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
    "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
    "guides.active.style": "dashed",
    "guides.normal.style": "dashed",
    "guides.stack.style": "dashed",
}

实际效果图如下：

TODO Highlight

维护时间稍长的代码仓库免不了会有各种 TODO、FIXME、HACK 之类的标记，[TODO Highlight] 能够帮我们把这些关键词高亮出来，在你翻阅代码时非常醒目，就像是在大声提醒你尽快把他解决掉。支持自定义配置需要高亮的关键词，实际使用比较坑的地方是，TODO、FIXME 之类的后面必须加上冒号，否则无法高亮。截图如下：

![]

功能增强

Settings Sync

[Settings Sync]基于 Gist 实现 VSCode 用户配置、快捷键配置、已安装插件列表等的备份和恢复功能，配置过程有详细精确的操作步骤文档。生成的备份 Gist 默认是私密的，如果你想设置为共享的，也可以一键切换。可能你会觉得不夸机器不需要备份，以我的实际经历来看，很多悲剧都发生在没有备份的情况下，相信聪明的你你知道该怎么做了，哈哈！

Git Lens

[Git Lens]把 VSCode 结合 Git 的使用体验优化到了极致，能让我们在不离开编辑器，不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等。官方的介绍也是非常的牛叉：

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Code Outline

[Code Outline]能在单独窗口中列出当源代码中的各种符号，比如变量名、类名、方法名等，并支持快速跳转，有点类似于 Vim 里面的 ctags，翻看老代码、开源项目代码时非常有用。

编码效率

效率的极致就是把能自动化的都自动化了，下面 4 个小工具能够极大的消除常见编辑需求里面的重复工作：

Document This

[Document This]能够一键给代码中的类、函数加上注释，支持函数声明、函数表达式、箭头函数等；

Embrace

[Embrace]快速的在选中代码两边添加各种引号、括号，不用来回移动光标，不过还是没有 Vim 中的 Surrounding 插件强大；

ECMAScript Quoets Transformer

[ECMAScript Quotes Transformer]方便在字符串和变量混搭模式（String Concat）的代码和字符串模板（Template Literals）模式间来回转换，省去手动的移动光标、修改引号等操作；

Code Spell Checker

[Code Spell Checker]强烈推荐，对大部分非英语母语又不想写出四不像变量名的程序员来说，正确识记拼写各种单词还是有不小的挑战，比模棱两可时需要去查在线词典不同的是，这款插件能实时的识别单词拼写是否有误，并给出提示，不少 bug 都是因为拼写错误导致的。

Code Runner

[Code Runner]，名副其实的代码运行插件，支持数十种语言，在不离开代码编辑器的前提下通过命令面板可直接执行代码，并查看输出。下面是盗图：

其他的配置：关于行末的空格、文件末尾的空行，以前需要使用插件来实现，现在直接修改 VSCode 内置配置即可实现：

{
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true
}

链接: https://www.fly63.com/article/detial/5519