作为 JavaScript 开发人员，这些必备的 VS Code 插件你都用过吗？

转载请注明出处：葡萄城官网

如今，Visual Studio Code 无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多，最主要是从 Sublime 和 Atom 那里。然而它的成功关键是源于能提供更好的性能和稳定的表现。另外，它还提供了如代码智能提示等开发者非常需要的功能。而这些功能，曾经只在像 Eclipse 或者 Visual Studio 2017 这样的完整集成开发环境(IDEs)中才有。

VS Code 的强大无疑来自于它的插件市场。多亏了开源社区，VS Code 现在几乎对所有的编程语言、框架和开发技术都有支持。提供这种支持的方式是多样的，主要包括了为特定技术提供代码片段、语法高亮、Emmet 以及智能提示功能。

VS Code 插件的种类

在本文，我主要介绍专门针对 JavaScript 开发者的 VS Code 插件。有很多满足此条件的 VS Code 插件，当然我不会都作介绍。相反，我会着重介绍那些已经相当流行而且对 JavaScript 开发者来说必不可少的 VS Code 插件。为简单起见，我把它们分为 10 类。

在这之中可能有你已经知道并且正在使用的插件，但也很有可能有一些是你听说过但未曾使用过的，我也希望通过本文能为你简要的介绍一下这些插件。

1. 代码片段插件

当你第一次安装 VS Code 时，它会附带一些 JavaScript 和 TypeScript 的代码片段。在你开始上手现代 JavaScript 之前，你将需要一些额外的代码片段来帮助你快速地编写 ES6/ES7 代码：

• VS Code JavaScript(ES6) snippets：当前最流行的，已有超过 120 万的下载量。这个插件为- JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持。
• JavaScript Snippet Pack：提供了有用的 JavaScript 代码片段集合。（这个链接打不开了）
• Atom JavaScript Snippet：移植自 Atom 的 JavaScript 插件。
• JavaScript Snippets：提供了 ES6 代码片段的集合。它包含对 Mocha、Jasmine 等其他 BBD(Behavior-Driven Development)测试框架的支持。

2. 语法高亮插件

VS Code 自带很好的 JavaScript 代码语法高亮。你可以通过安装主题改变这些颜色。然而，如果你想要更高水平的可读性，就得安装语法高亮的插件了。这里有一些：

• JavaScript Atom Grammar：它用 Atom 编辑器里的 JavaScript 语法高亮替换 VS Code 原来的。
• Babel JavaScript：支持 ES201X、React、FlowType 以及 GraphQL 的语法高亮。
• DotENV：支持.env 文件语法高亮，在你使用 Node 时会非常有用。

3. 代码检测插件

以最小的烦恼高效编写 JavaScript 代码，需要一个代码检测(linter)工具。它强制团队所有成员遵循特定的代码规范。ESLint 是最受欢迎的，它支持许多代码风格，包括 Standard、Google 和 Airbnb 的 JavaScript 代码规范。这里是最流行的 VS Code 代码检查插件：

• ESLint：这个插件把 ESLint 集成到 VS Code 中。它是最流行的代码检测插件，已有超过 670 万下载量。它的规则在.eslintrc.json 里配置。
• JSHint：基于 JSHint 的代码检测插件。在项目跟目录下使用.jshintrc 文件作为其配置。
• JavaScript Standard Style：零配置和严格规则的代码检测，强制使用 StandardJS 规则。 如果你想查看对各种代码检测优缺点的综述，可以来看看我们对代码检测工具的比较。

4. Node 插件

每一个 JavaScript 项目都需要至少一个 Node package，除非你是那种喜欢以艰难的方式做事的人。这里有一些 VS Code 插件，能帮你更容易的处理 Node 模块。

• npm：用 package.json 来校验安装的 npm 包，确保安装包的版本正确，对缺少 package.json 文件的包或者未安装的包给出高亮提示。

• Node.js Modules IntelliSense：提供 JavaScript 和 TypeScript 导入声明时的自动补全。源码：vscode-node-module-intellisense。

• Path IntelliSense：它其实与 Node 没有关系，但是你肯定需要对本地文件的智能提示，这个插件会自动补全文件名。

• Node exec：允许你用 Node 执行当前文件或者选中的代码。

• View Node Package：利用此插件可快速查看 Node 包源码，让你直接在 VS Code 中打开 Node 包的代码库或文档。

• Search node_modules：通常 node_modules 文件夹不在默认的搜索范围内，这个插件允许你搜索它。源码：vscode-search-node-modules。

• Import Cost：显示导入的包的大小。源码：import-cost。

5. 代码格式化插件

有时，你发现自己会对以前写过的风格不太理想的代码做格式整理。为了节约时间，你可以安装以下任何的 VS Code 插件，来快速地格式化和重构现有代码：

• Beatufy：一个 jsBeautifier 的插件，支持 JavaScript、JSON、CSS 和 HTML。可通过.jsbeautifyrc 文件自定义。它是最流行的格式化工具，目前有 230 万的下载量。
• Prettier Code Formatter：利用 Prettier 的支持 JavaScript、TypeScript 和 CSS 的插件，目前有超过 150 万的下载量。
• JS Refactor：提供许多重构 JavaScript 代码的实用方法和操作，例如抽取变量和方法，把现有代码转为使用箭头函数和模板字符串的等价形式，导出函数等。
• JavaScript Booster：一款了不起的代码重构工具。拥有需要代码操作，比如把 var 转为 const 或者 let，去除多余的 else 语句，合并声明和初始化。其灵感大量源于 WebStorm 的启发。源码：vscode-javascript-booster。

6. 浏览器插件

除非你是在用 JavaScript 写控制台程序，否则你多半会在浏览器中执行你的 JavaScript 代码。这意味着，你会频繁地刷新浏览器以观察每次你更新代码的效果。这里有一些工具，能极大地减少你开发时的这种重复流程，而不是每次都手动刷新浏览器：

• Debugger for Chrome：在编辑器中打断点，让你轻松地在 Chrome 里调试 JavaScript。源码：vscode-chrome-debug。

• Live Server：开启本地开发时服务器，为静态和动态页面提供实时刷新功能。源码：vscode-chrome-debugvscode-live-server。

• Preview on Web Server：提供 web 服务器和实时预览功能。

• PHP Server：对测试只能在客户端运行的 JavaScript 代码很有用。

• Rest Client：相较于用浏览器或者一个 CURL 程序来测试你的 REST API 端点，你可以安装这个工具，直接在编辑器里相互性地发 HTTP 请求。

7. 框架类插件

对于大多数项目，你会使用合适的框架去构建你的代码，以减少开发时间。VS Code 通过插件对大多数主流框架都做了支持。然而，仍有一些特定框架没有得到完全的支持。下面是一些提供了强大功能的 VS Code 插件。

• Angular 6：提供 Angular 6 的代码片段，支持 TypeScript、HTML、Angular Material ngRx、RxJS 和 Flex Layout。目前有 220 多万的下载量和 172 个 Angular 代码片段。
• Angular v5 snippets：提供针对 TypeScript、RxJS、HTML 和 Docker 文件的代码片段。目前有 270 多万的下载量。
• React Native/React/Redux snippets for es6/es7：提供对这些框架的 ES6/ES7 语法的代码片段。
• React Native Tools：为 React Native 框架提供代码智能提示、命令行工具和调试特性。
• Vetur：为 Vue 框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。它带有很好的发布在 GitBook 上的文档。
• Ember：为 Ember 提供了命令行支持和智能提示。安装完后，所有 ember cli 的命令可直接在 VS Code 自己的命令行列表中使用。
• Cordava Tools：支持 Cordava 插件和 Ionic 框架，提供基于 Cordova 的项目的智能提示、调试已经其他特性的支持。
• jQuery Code Snippets：提供了超过 130 个 jQuery 的代码片段，使用 jq 前缀来激活。

8. 测试类插件

测试是软件开发中的关键环节，对于生产阶段的项目来说更是如此。你可以通过阅读我们的指南-JavaScript 测试：单元测试 vs 功能测试 vs 集成测试-来获得对 JavaScript 测试的一个概观。这里有一些针对测试的 VS Code 插件：

• Mocha sidebar：利用 Mocha 库为项目提供单元测试。这个框架帮你直接在代码里跑测试，把错误信息以装饰器形式显示出来。
• ES Mocha Snippets：提供 ES6 语法的 Mocha 代码片段。这个插件的重点在于利用箭头函数，尽可能减少花括号的使用，保持代码的紧凑。可通过设置允许使用分号。
• Jasmine Code Snippets：针对 Jasmine 测试框架的代码片段。
• Protractor Snippets：针对 Protractor 端到端测试框架的代码片段。支持 JavaScript 和 TypeScript。
• Node TDD：为 Node 和 JavaScript 项目提供测试驱动开发的支持。能在源码的更新后，立即触发自动化测试的构建。源码：node-tdd

9. 其他棒棒的插件

我把下一批 VS Code 的插件归为"厉害的"(awesome)这一类，因为这个描述恰到好处。

• Quokka.js：非常厉害的调试工具，为 JavaScript 提供了快速构建原型的演练场，并且附带有很好的文档。

• Paste as JSON：快速地将 JSON 数据转为 JavaScript 代码。源码：quick-type。

• Code Metrics：这是另一个非常棒的插件，计算 JavaScript 和 TypeScript 代码中复杂度。源码：codemetrics。

10. 插件包

现在我们来到了最后一类，我想让你知道，VS Code 市场有有一个插件包的分类。本质上，它们是相关联的一些 VS Code 插件的集合，打成一个包，方便安装。这里有些较好的：

• Nodejs Extension Pack：这个包里有 ESLint、npm、JavaScript(ES6) snippets、Search node_modules、NPM IntelliSense 和 Path IntelliSense。
• VS Code for Node.js - Development Pack：这个包含 NPM IntelliSense、ESLint、Debugger for Chrome、Code Metrics、Docker 和 Import Cost。
• Vue.js Extension Pack：一些 Vue 和 JavaScript 插件的集合。目前它含有 12 个 VS Code 的插件，有一些之前我们没有提到的，比如 auto-rename-tag 和 auto-close-tag。
• Ionic Extesion Pack：这个包里有针对 Ionic、Angular、RxJS、Cordova 和 HTML 开发的插件。
• SpreadJS 纯前端表格组件：可嵌入你系统的在线 Excel，功能布局与 Excel 高度类似，完全兼容 Excel 的 450 种公式和 92 种图表。

总结

VS Code 拥有大量的高质量插件，这让它在 JavaScript 开发者群体中广受欢迎。写 JavaScript 代码，再没有比现在更容易了。

像 ESLint 这样的插件，帮助你避免代码中的常见错误； Debugger for Chrome，帮助你更容易地调试代码；带有智能提示的 Node.js 插件帮助你正确引用模块；像 Live Server 和 REST client 这样的可用工具，让你在完成工作时减少了对外部工具的依赖；再比如 SpreadJS 纯前端表格控件，让在线 Excel 嵌入您的应用。所有这些工具，都极大地加快了你的迭代流程。

我希望这些列表让你接触到新的 VS Code 插件，对你的工作流程有帮助。