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

这篇文章是《能让你开发效率翻倍的 VSCode 插件配置（上）》的续篇，包括 VSCode 外观加强、功能加强、编码效率等方面的 10 个插件，其中有部分插件也是我发布上篇文章以后在评论里学到的（这多是写技术文章的最大好处了，哈哈），试用以后以为不错，如今也列出来（同时也感谢愿意评论交流的同窗），但愿对读到这篇文章的同窗有所帮助。

外观加强

若是说美食须要美器的陪衬，优雅美观的代码编辑器会大大提高工程师的编码体验、工做幸福感。

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
}
复制代码

写在最后

古有语“工欲善其事必先利其器”，VSCode 在众多代码编辑器中属轻巧而不失灵活的利器，不少器自己就是就很是值得研究，若是有什么需求须要去寻求扩展，我的建议的作法仍是多读文档（RTFM，Read The Fucking Manual），多读官方文档，摸清楚清楚你本身手头工具的能力和局限，才能避免在法拉利跑车上安装自行车轮子的笑话。若是实在要新装轮子，建议仔细阅读新轮子的说明书。

---

该系列的下篇专门讲调试工具，敬请期待。