这篇文章是《能让你开发效率翻倍的 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)模式间来回转换,省去手动的移动光标、修改引号等操作。