> - 原文地址：[15 VSCode extensions every Web Developer must have in 2021.](https://levelup.gitconnected.com/15-vscode-extensions-every-web-developer-must-have-in-2021-9388a38c70fc)
> - 原文作者：[Shashank M V](https://medium.com/@shashankmv)
> - 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
> - 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/article/2020/15-vscode-extensions-every-web-developer-must-have-in-2021.md](https://github.com/xitu/gold-miner/blob/master/article/2020/15-vscode-extensions-every-web-developer-must-have-in-2021.md)
> - 译者：[regon-cao](https://github.com/regon-cao)
> - 校对者：[samyu2000](https://github.com/samyu2000) [lsvih](https://github.com/lsvih)

# 2021 年 Web 开发者应该掌握的 15 个 VSCode 扩展

![Photo by [Ash Edmonds](https://unsplash.com/@badashproducts?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/11520/0*shB6jCQ3DNaz7TzO)

## 为何 VSCode 如此受欢迎

Visual Studio Code 在开发人员中已经迅速流行起来，在 [Stack Overflow 2019 年开发者调查](https://insights.stackoverflow.com/survey/2019)中，它被评为最受欢迎的开发环境。可定制化是其受欢迎的原因之一。

![](https://cdn-images-1.medium.com/max/2414/1*_V5rABvXNNMtsvYfsQYECA.png)

---

如果你正在使用 VSCode，本文就是一份可以帮助你提高效率的扩展列表。

## Git Lens

当你和别人协同开发项目时，这个扩展能让你一眼就看到代码是谁写的。它显示了提交或更改代码的时间以及作者。

有时候，你的团队成员提交的代码可能会破坏项目的其他特性，这时它就很有帮助。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)了解详情。

---

![](https://cdn-images-1.medium.com/max/3798/1*AFKRY5Sw2u6_WiePAZ2C5Q.png)

## Wallaby.js

Wallaby.js 是一个智能的 JavaScript 测试运行器，可以持续运行你的测试。当你更改代码（甚至还没有保存文件）时，它就会将代码覆盖率和其他测试结果直接报告给你的代码编辑器。

这个扩展有助于提高你的开发效率。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode)了解详情。

---

![](https://cdn-images-1.medium.com/max/3800/1*m9a7O9C9JThMZvrY1Bv2wA.png)

## TypeScript Hero

TypeScript 是 JavaScript 的超集，它有可选的类型并编译成纯 JavaScript。当我们使用 TypeScript 时，这个扩展很有用。它通过一个名为 Light bulb 的特性对导入的代码进行排序和组织，并修复代码错误。

你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero)了解详情。

---

![](https://cdn-images-1.medium.com/max/3796/1*AsHzCn-2bghbvlXatLsqtA.png)

## Prettier Code Formatter

当进行代码格式化时，Prettier 的固定代码格式的功能可以帮助开发人员提高效率。你可以将其配置为保存时格式化，这样会在保存时自动格式化代码。

一旦你有了这个扩展，你将永远不必为格式化代码发愁，因为 Prettier 为你做了。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)了解详情。

---

![](https://cdn-images-1.medium.com/max/3798/1*4pSi-e9FlQ6bH6aXqLNidw.png)

## Path Intellisense

如果你使用 React 或 Angular 这样的 JavaScript 库进行大型项目的开发，你就能感受到在导入组件时去找组件的具体路径是件多么令人厌烦的事。这个扩展可以帮助你在导入时自动补全组件的路径。

它还可以帮助你自动完成 HTML 文件中的文件引用。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)了解详情。

---

![](https://cdn-images-1.medium.com/max/3800/1*ewaqvxx9cCabk16-6yBdww.png)

## Debugger for Chrome

我们都知道，有时候调试程序是一件令人厌烦的事，这个扩展用于辅助你调试 JavaScript 代码。这是微软开发的扩展。我们可以设置断点，逐步执行代码，调试动态添加的脚本等。

假设我们有一个函数，我们不确定它是否正在执行，这个扩展可以设置断点，如果在断点处暂停，说明它正在执行。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)了解详情。

---

![](https://cdn-images-1.medium.com/max/3798/1*UUsUQ-DpIUNjzZ1l26AbrA.png)

## Bracket Pair Colorizer

这个扩展通过颜色来标记配对的括号。当你在进行调试，而且代码量很大时，这个扩展可以说是救世主。

用户可以根据需要，定义某些字符的配对，还可以定义这些字符在代码中的颜色。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)了解详情。

---

![](https://cdn-images-1.medium.com/max/3806/1*ba50-GiAs8LJPfXVRI0rOg.png)

## JavaScript (ES6) Code Snippets

如果你是一名 JavaScript 开发人员，它能帮助你快速构建新项目并节省大量时间。由于它为许多通用的 JavaScript 函数提供了预定义的代码片段，所以你再不需要手动输入所有代码。

这个插件对对 TypeScript，React，Vue 和 HTML 都提供支持。如果你使用 React，还有一个类似的扩展（ES7 React/Redux/GraphQL/React-Native snippets）可以使用。

这里是它们的链接：[JS snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)，[React Snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)。

---

![](https://cdn-images-1.medium.com/max/3786/1*V974zp6XqZs1MfBcFcUnpw.png)

## Live Share

当你与团队成员共同解决一个问题，并希望在编辑器上一起处理同一段代码时，这个扩展可以帮助你把代码编辑器的控制权交给团队的其他成员，同时你仍然可以进行操作。

你还可以共享终端实例、本地主机 web 应用程序、语音呼叫等等。这个扩展由微软提供。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)了解详情。

---

![](https://cdn-images-1.medium.com/max/3806/1*E6DGM3ImqfS3IpTg8y61KQ.png)

## ESLint

由于 JavaScript 是一种高度灵活的语言，一些小错误可能导致大问题。因此，在处理庞大的代码库时，我们需要一个 linter 和一个 formatter。这个扩展可以帮助你完成此项工作。它可以自动对你的代码进行格式化，还能发现代码里的错误。

遵循 ESLint 规则会让你的代码离良好的规范更近一步。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)了解详情。

---

![](https://cdn-images-1.medium.com/max/3806/1*HnfG1lQHo0Hok3naITI0ZQ.png)

## Paste JSON as Code

作为开发人员，你经常要处理接口。我们都知道 API 中最常用的数据结构是 JSON。为了避免一些可能造成应用程序崩溃的类型错误，我们需要定义类或接口。这个扩展可以根据 JSON 数据生成一个类。

因此，我们可以使用它一键生成类，而不必手动编写类代码，因而节省了时间。这个扩展支持大多数流行的语言。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)了解详情。

---

![](https://cdn-images-1.medium.com/max/3802/1*GS-bVT7VO6zoP-DfHg2UIw.png)

## Peacock

当你在多个工作区进行开发时，这个扩展可以显示已经切换过的工作区以及当前所处的工作区。

你可以点击[这里](http://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)了解详情。

---

![](https://cdn-images-1.medium.com/max/2200/1*InGUBkiBuZiV9WwJq5bawQ.png)

## Better Comments

这个扩展可以帮助你在代码中创建更人性化的注释。它可以让你为不同类型的注释（比如待办事项、高亮显示、警报等）设定不同的颜色代码。

强烈建议编写通常遵循的干净且文档化的代码。你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)了解详情。

---

![](https://cdn-images-1.medium.com/max/3798/1*MEiGfVg_qu_04cUut3RiYA.png)

## Search node_modules

当我们构建组件库或者在不同的应用里使用组件时，我们肯定会对 node modules 做一些修改。这个扩展可以让你快速浏览 node modules 目录中的文件。

你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules)了解详情。

---

![](https://cdn-images-1.medium.com/max/3798/1*oO6MdinZt9hWAYUZAX7NIQ.png)

## Rest Client

作为开发人员，我们每天都会使用 Postman 来检测来自 API 的响应。这个扩展可以让你直接在 VSCode 中发出 HTTP 请求并查看响应，而无需在两个应用程序之间切换。

你可以点击[这里](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)了解详情。

---

![](https://cdn-images-1.medium.com/max/3786/1*uFiFhMR3tOp6KXMkQ4gy-w.png)

感谢阅读!

> 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。

---

> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。
