开发增效利器—2022 年 VsCode 插件分享

1、前言

工欲善其事必先利其器，提起 VS Code ，想必各位开发者一定不会陌生。VS Code 凭借着其免费，开源以及强大的功能，成为了最受欢迎的 IDE 之一。其中最值得一提的就是它的插件市场，在使用 VS Code 时碰到的任何问题几乎都可以寻找对应的插件来解决。

中原银行前端研发团队从开发者的角度精选了 2022 年公认提升研发效率的 VS Code 插件。希望无论是基础插件，还是进阶插件，都能够帮助所有研发人员提质增效！

2、基础插件

顾名思义，基础插件是指与基础编码行为相关的插件，几乎每人都需要用到。从超高的下载量就能看出，它们几乎已经成为了前端开发者必备的插件。下面介绍几款高口碑插件，推荐给开发者。

2.1、Auto Rename Tag - 自动同步重命名的标签

在写 HTML 的时候，常常因为闭合标签语法感到烦恼——当需要修改一个标签时，必须找到它的闭合标签并一起修改！而有了这个插件，我们在修改 HTML 标签的时候，只用修改一次，插件则会智能分析其标签层级，自动实时修改对应的闭合标签，方便快捷。且还可以配合一款兄弟插件 `Auto Close Tag`，实现自动辅助闭合标签，二者一起搭配使用体验更佳。

2.2、Code Runner - 代码一键调试

Code Runner 实现在调试代码时，可以通过键盘快捷键、命令面板、鼠标右键菜单、以及右上角快捷按钮等多种方式实时运行指定代码。Coder Runner 的强大在于不仅可以运行完整代码文件，还能运行代码片段，而且几乎支持市面上的所有语言！如果代码有交互输入的需求，还可以在控制台里运行。总之，当有经常调试代码的需求的时候，选它准没错。

2.3、Chinese language Pack - 简体中文语言包

这款插件的重要性不言而喻。下载 VS Code 后的第一件事就是安装简体中文语言包。

2.4、Live Server - 实时刷新的轻量服务器

在进行页面开发时，热更新功能将让开发变得非常省心省力！Live Server 可以实现在代码变更之后实时自动更新页面，无需任何额外操作，极大地提升开发效率。当然，目前有很多手段可以实现页面的热更新，例如 webpack 、 walle 等构建工具，但 Live Server 绝对是最小，最轻，最方便的。它为开发者提供了一个临时自动搭建的本地服务器，一键启动即可享受页面热更新。

2.5、ESLint - 代码规范和错误检查

ESLint 是大家耳熟能详的一款插件，它是一个代码检查工具，用来检查代码是否符合指定的规范。每位研发人员都有自己独特的编码风格。但作为一个团队的一员时，统一的代码规范就会变得尤为重要。

ESLint 就是为统一代码规范而生，但或许很多研发人员刚开始用 ESLint 会很不适应，但是当代码写得越来越规范，带来的提升将是全方位的。

2.6、Prettier - 代码格式化工具

Prettier 是一个代码格式化工具，在功能上与 ESLint 有一部分重合。但是 ESLint 主要是用来限制 JS 的规范，而 Prettier 作用范围更广。而且 Prettier 更追求“Opinionated”的思想，它的自由度更低，标准更为统一，强调一个“省心”。这也是 Prettier 的设计哲学，它也因此广受欢迎。

2.7、Path Intellisense - 代码路径补全

如果要说出一个敲代码时最容易出错的地方，那一定是文件路径。而 Path Intellicence 可以完全解决这个烦恼，它会在编码过程中，实时检测到需要引入资源文件时，自动补全路径名。这个插件的魅力，让每一位研发人员，一旦用过此插件，就会离不开它。

2.8、Node.js Modules Intellisense

Node.js Modules Intellisense 是一款 Node.js 的模块名自动补齐工具。如果你需要经常写 node，那你的插件库里一定不能少了它。它可以在你的导入语句中自动补齐你需要的模块。这将大大提升你写 node 代码的效率。

3、进阶插件

对于高级研发工程师，软件开发已经轻车熟路，对开发环境有了更高的要求，想进一步提升工作效率，而以上的基础插件无法满足时，下面这些进阶插件或许可以提供更多惊喜。

3.1、Quokka.js - 实时的 JS/TS 调试

Quokka.js 的惊喜之处是可以将编码中的变量的值实时显示出来。用它进行 JS/TS 代码的调试，可以节约较多时间成本，直接在编辑器里实现变量所见即所得。相比于用 code runner 调试代码，Quokka.js 似乎更加直接，不过二者的使用场景有一些不同，研发者可以结合自身的需求来选择。

3.2、Code Spell Checker - 错误拼写检查

开发者应该都经历过一个 bug 找半天，最后发现是低级拼写错误的无语时刻。Code Spell Checker 的出现就是来帮助避免这种情况的。

Code Spell Checker 可以突出显示文件中的单词拼写错误，辅助检查并标注各种流行的编程语言的拼写问题。安装时支持英语，附加的字典可支持八种语言以及医学术语等。有了这款插件，在编程中不经意间犯的错就会被直接扼杀在摇篮里。

3.3、Project Manager - 项目管理

开发时常常需要同时打开多个项目，并且时不时来回切换。每当用多个 IDE 窗口打开不同的项目时，杂乱不堪的桌面总会消耗研发者的耐心与精力。这时带来了一个问题：为什么不用一个 IDE 管理多个项目呢？有了 Project Manager 这个神器，则再也不用在这个问题上面花费心思。

Project Manager 拥有专用侧边栏，并且可以将任何文件夹或工作区另存为项目，且提供自动检测 Git、SVN 等储存库和为项目打标签等多种功能……它的一切功能只为一种理念服务：高效管理项目。

3.4、Window Colors - IDE 窗口着色

这是一款非常小众，但也很有趣的插件。当习惯打开多个编辑器工作时，Window Colors 可以为每个窗口配置一个唯一的颜色便于区分。

3.5、Bookmarks - 代码书签

有时候读代码往往比写代码更让人头疼。研发者经常为了梳理一个逻辑，在几个文件之间来回跳转，而这个过程会让代码分析的过程更加混乱。有了 Bookmarks ，在阅读代码时会轻松不少。

Bookmarks 提供了丰富的快捷键，可以一键标记、删除、前后跳转、列出标签列等等，并且提供专门的侧边栏来管理书签。在它的帮助下，阅读代码会更加清晰和便捷。

3.6、Import Cost - 实时计算导入依赖的大小

这款插件非常实用！如果对程序的性能有严格的要求，此插件能够在引入依赖时就能判断它的大小，可有效减少代码体积。

当下已经有很多技术来面对程序膨胀的问题，例如各种懒加载、延迟加载和代码拆分等方案。但是 Import Cost 可以帮助研发者在开发的过程中就找到痛点并解决问题，它不仅可以降本增效，还有助于对所开发的程序有更深的了解和掌控。

3.7、Todo Tree - 高效的编码任务管理

在比较大的项目，或比较长的代码中快速定位到目标对象，Bookmarks 插件是个不错的选择。如果还需要更方便地待办任务管理、更丰富的待办任务配置等功能，那么 Todo Tree 才是不二之选。

Todo Tree 是一个管理待办事项插件。同时，用它来进行代码的标记、查找与跳跃也非常方便。Todo Tree 可以让研发者非常清晰地管理自己的项目与工作任务，快速定位到指定标签位置，再也不用为过于复杂的文件目录而感到头疼。

Bookmarks 更轻量， Todo Tree 更强大，研发者可以根据自己的实际情况来选择适合自己的插件。

3.8、Markdown All in One - 完整的 Markdown 编辑环境

一个合格的程序员一定会写 Markdown，而安装了 Markdown All in One 这个插件，VS Code 就可以变成一个强大的 Markdown 编辑器。

Markdown All in One 的功能非常强大，包括实时预览、丰富的快捷键、TOC 标签、数学公式、自动完成、列表编辑、导出为 HTML 和 PDF 等等. 它几乎可以让 VS Code 拥有与市面上主流的 Markdown 编辑器同等的体验。

基础快捷键

列表编辑

格式化

3.9、PlantUML - 快速绘制 UML 图

开源的 UML 图绘制插件，支持在 VSCode 中通过文本描述的形式，来高效绘制各种图形，对软件研发人员简单且友好。无论是在需求分析、流程设计，还是代码设计、逻辑梳理、任务管理等场景，都可以让复杂的事情轻松通过图形清晰描述，堪称程序员的“福音”！

此插件支持绘制时序图、用例图、类图、流程图、活动图、对象图、甘特图、思维导图等十多种常用图形，更可以额外安装 Graphviz 后绘制更加高级复杂的图形，完全满足日常研发人员各类绘图需求。

3.10、GitLens - Git 源代码管理插件

项目的开发通常是整个团队的工作，只提升一个人的工作效率是不够的。GitLens 是一个 git 源代码管理插件，它的功能极其强大，称得上是核心生产力插件。

说起 git 功能，vscode 自带的 git 在易用性和完整性之间做了一个不错的平衡，但是仍有很多开发者觉得这些功能不够用，而 GitLens 则提供了若干强大的功能，弥补了这些不足之处。

GitLens 拥有文件历史视图、行历史视图等功能，同时可以用它进行代码的提交与对比，甚至还可以实时查看每一行代码的日志来帮助我们阅读代码。有了 GitLens，几乎我们所有繁琐的 git 操作都可以在 IDE 里实现。

4、总结

本期的插件推荐虽然介绍了多款好用的插件，还是要提醒研发者根据自己的实际需求进行选择。尽管每个插件的功能都非常强大实用，但安装过多插件的话，不仅可能会有功能地冲突或重复，还会导致内存占用过高从而产生性能问题。所以，在选择插件时，需要在功能和性能之间找到平衡。

5、Elephant  IDE

配置 IDE 开发环境，在功能和性能之间找到平衡绝非易事。不过既然追求省心，那就贯彻到底 —— 中原银行前端研发团队打造了行内专属前端开发 IDE：Elephant IDE，中文称为小象编辑器。

Elephant IDE 在 VSCode 的源码基础上进行了改造，预置了前端开发环境的多种高效插件以及多款行内项目自研专用插件，开箱即用且实时迭代更新。而且它支持根据项目的不同，选择开启对应的 Extensions Pack，这意味着开发者再也不用频繁调整插件功能的启停。

讲到这里，你是否也蠢蠢欲动了呢？全新 Elephant IDE，赶紧来试试吧。

本文转载自原银科技微信公众号

原文链接：开发增效利器—2022年VsCode插件分享