【分享】每个 Web 开发者在 2021 年必须拥有 15 个 VSCode 扩展
为什么 VSCode 如此受欢迎
Visual Studio Code 在开发人员中迅速流行起来，它是最流行的开发环境，可定制性是其流行的原因之一。
因此，如果你正在使用 VSCode，这里有一个扩展列表，你必须提高你的工作效率。
1. Git Lens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
当你与你的团队成员在一个项目上工作时，这个扩展使用 VSCode 的强大功能，帮助你可视化代码创作一目了然。
它显示了特定代码何时提交或更改，以及是谁更改了它。
有时，你的团队成员提交的代码可能会破坏项目的其他功能，这在那段时间是有帮助的。你可以在这里找到它。
2. Wallaby.js
https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode
js 是一个智能的 JavaScript 测试运行器，它可以持续运行你的测试。
当您更改代码时 (甚至不保存文件)，它将直接向代码编辑器报告代码覆盖率和其他结果。
这个扩展有助于提高您的开发效率。
3. TypeScript Hero
https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero
TypeScript 是 JavaScript 的一个超集，具有可选的类型，并可编译为纯 JavaScript。
当我们使用 TypeScript 时，这个扩展就派上用场了。它通过一个名为 “灯泡” 的功能对你的导入文件进行分类和组织，并修复编码错误。
4. Prettier Code Formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Prettier 是一种固执的代码格式，它使开发人员在代码格式方面的工作变得更容易。
您可以将其配置为保存时格式化，并在保存时格式化代码。
一旦你有了这个扩展，你将永远不必担心格式化的代码。
5. Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
如果你在 React 或 Angular 等 JavaScript 库上工作，而且你在做大型项目，你就知道在导入时找到组件的确切路径有多烦人。
这个扩展可以帮助你自动完成导入的路径。
它还可以帮助您自动完成 HTML 文件中的文件引用。
6. Debugger for Chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
我们都知道有时候调试是多么烦人，所以这个扩展被用来帮助你调试 JavaScript 代码。
它是由微软开发的。我们可以设置断点、逐步执行代码、动态添加调试脚本等等。
假设我们有一个不确定是否正在执行的函数，这个扩展可以通过在执行时在调试器中暂停来帮助我们。
7. Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
这个扩展允许匹配的括号被识别的颜色。
当你在调试过程中处理一个巨大的代码库时，这个扩展就像救星一样。
用户可以定义要匹配的字符和要使用的颜色。
8. JavaScript (ES6) Code Snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
如果您是一名 JavaScript 开发人员，这可以为您节省大量时间。
当你想快速构建新项目时，这可能会有帮助。它没有键入全部代码，而是为最常见的 JavaScript 函数预定义了许多代码片段。它支持 TypeScript、React、Vue 和 HTML。如果你在 React 上工作，有一个类似的扩展。(ES7 React/Redux/GraphQL/React-Native snippets)。
9. Live Share
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
当您与您的团队成员一起解决问题，并希望在编辑器上共同处理相同的代码时，这将帮助您将代码编辑器的控制权交给您的团队成员，您可以同时处理它。
您还可以共享终端实例、本地主机 web 应用程序、语音通话等。
10. ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
由于 JavaScript 是一种高度灵活的语言，一些小错误可能会导致巨大的问题。
因此，当工作在巨大的代码库，我们需要一个 linter 和一个格式化程序。
这个扩展可以帮助你做到这一点。
这可以自动格式化你的代码，并发现你的代码中的错误。
实现 ESLint 规则会让你离为你的代码库建立良好的标准更近一步。
11. Paste JSON as Code
https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype
作为一名开发人员，您经常要处理 API。
众所周知，API 中最常用的数据结构是 JSON。
为了避免一些可能破坏应用程序的类型错误，我们使用类或接口。
这个扩展可以用 JSON 数据生成一个类。
因此，与其手工编写类，我们可以使用它来节省创建类的时间和负担。
这个扩展支持大多数流行的语言。
12. Peacock
http://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
当你在多个工作空间上工作时，这个扩展可以帮助你识别你已经切换到或工作的确切的工作空间。
13. Better Comments
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
这个扩展可以帮助您在代码中创建更人性化的注释。
它允许您为不同类型的注释提供不同的颜色代码，这些注释可以是 TODOs、高亮显示、警报和其他类型的注释。
这是强烈推荐的，用于编写干净和文档化的代码。
14. Search node_modules
https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules
当我们构建组件库并在不同的应用程序中使用该组件时，我们肯定会对节点模块进行一些修改。
这个扩展允许你在项目的 node_modules 目录中快速浏览文件。
15. Rest Client
https://marketplace.visualstudio.com/items?itemName=humao.rest-client
作为开发人员，我们每天都会定期使用 Postman 来检查 API 的响应。
这个扩展允许你做一个 HTTP 请求，并在 VSCode 中直接查看响应，而不是在两个应用程序之间切换，这个扩展为你做这个工作。
爱心三连击
1.看到这里了就点个在看支持下吧，你的在看是我创作的动力。
2.关注公众号脑洞前端，获取更多前端硬核文章！加个星标，不错过每一条成长的机会。
3.如果你觉得本文的内容对你有帮助，就帮我转发一下吧。
