【分享】每个 Web 开发者在 2021 年必须拥有 15 个 VSCode 扩展

为什么 VSCode 如此受欢迎

Visual Studio Code 在开发人员中迅速流行起来，它是最流行的开发环境，可定制性是其流行的原因之一。

因此，如果你正在使用 VSCode，这里有一个扩展列表，你必须提高你的工作效率。

1. Git Lens

当你与你的团队成员在一个项目上工作时，这个扩展使用 VSCode 的强大功能，帮助你可视化代码创作一目了然。

它显示了特定代码何时提交或更改，以及是谁更改了它。

有时，你的团队成员提交的代码可能会破坏项目的其他功能，这在那段时间是有帮助的。你可以在这里找到它。

2. Wallaby.js

js 是一个智能的 JavaScript 测试运行器，它可以持续运行你的测试。

当您更改代码时 (甚至不保存文件)，它将直接向代码编辑器报告代码覆盖率和其他结果。

这个扩展有助于提高您的开发效率。

3. TypeScript Hero

TypeScript 是 JavaScript 的一个超集，具有可选的类型，并可编译为纯 JavaScript。

当我们使用 TypeScript 时，这个扩展就派上用场了。它通过一个名为 “灯泡” 的功能对你的导入文件进行分类和组织，并修复编码错误。

4. Prettier Code Formatter

Prettier 是一种固执的代码格式，它使开发人员在代码格式方面的工作变得更容易。

您可以将其配置为保存时格式化，并在保存时格式化代码。

一旦你有了这个扩展，你将永远不必担心格式化的代码。

5. Path Intellisense

如果你在 React 或 Angular 等 JavaScript 库上工作，而且你在做大型项目，你就知道在导入时找到组件的确切路径有多烦人。

这个扩展可以帮助你自动完成导入的路径。

它还可以帮助您自动完成 HTML 文件中的文件引用。

6. Debugger for Chrome

我们都知道有时候调试是多么烦人，所以这个扩展被用来帮助你调试 JavaScript 代码。

它是由微软开发的。我们可以设置断点、逐步执行代码、动态添加调试脚本等等。

假设我们有一个不确定是否正在执行的函数，这个扩展可以通过在执行时在调试器中暂停来帮助我们。

7. Bracket Pair Colorizer

这个扩展允许匹配的括号被识别的颜色。

当你在调试过程中处理一个巨大的代码库时，这个扩展就像救星一样。

用户可以定义要匹配的字符和要使用的颜色。

8. JavaScript (ES6) Code Snippets

如果您是一名 JavaScript 开发人员，这可以为您节省大量时间。

当你想快速构建新项目时，这可能会有帮助。

它没有键入全部代码，而是为最常见的 JavaScript 函数预定义了许多代码片段。

它支持 TypeScript、React、Vue 和 HTML。

如果你在 React 上工作，有一个类似的扩展。(ES7 React/Redux/GraphQL/React-Native snippets)。

9. Live Share

当您与您的团队成员一起解决问题，并希望在编辑器上共同处理相同的代码时，这将帮助您将代码编辑器的控制权交给您的团队成员，您可以同时处理它。

您还可以共享终端实例、本地主机 web 应用程序、语音通话等。

10. ESLint

由于 JavaScript 是一种高度灵活的语言，一些小错误可能会导致巨大的问题。

因此，当工作在巨大的代码库，我们需要一个 linter 和一个格式化程序。

这个扩展可以帮助你做到这一点。

这可以自动格式化你的代码，并发现你的代码中的错误。

实现 ESLint 规则会让你离为你的代码库建立良好的标准更近一步。

11. Paste JSON as Code

作为一名开发人员，您经常要处理 api。

众所周知，api 中最常用的数据结构是 JSON。

为了避免一些可能破坏应用程序的类型错误，我们使用类或接口。

这个扩展可以用 JSON 数据生成一个类。

因此，与其手工编写类，我们可以使用它来节省创建类的时间和负担。

这个扩展支持大多数流行的语言。

12. Peacock

当你在多个工作空间上工作时，这个扩展可以帮助你识别你已经切换到或工作的确切的工作空间。

13. Better Comments

这个扩展可以帮助您在代码中创建更人性化的注释。

它允许您为不同类型的注释提供不同的颜色代码，这些注释可以是 TODOs、高亮显示、警报和其他类型的注释。

这是强烈推荐的，用于编写干净和文档化的代码。

14. Search node_modules

当我们构建组件库并在不同的应用程序中使用该组件时，我们肯定会对节点模块进行一些修改。

这个扩展允许你在项目的 node_modules 目录中快速浏览文件。

15. Rest Client

作为开发人员，我们每天都会定期使用 Postman 来检查 API 的响应。

这个扩展允许你做一个 HTTP 请求，并在 VSCode 中直接查看响应，而不是在两个应用程序之间切换，这个扩展为你做这个工作。

其他精彩文章

• 【分享】73 个提高生产力的很棒的 NPM 包【译】