25 个最佳 VS Code 扩展

这些能让你的生活更轻松、更高效。

拥有一个好用的文本编辑器对于提高你的工作效率、缩短学习时间以及管理时间都至关重要。

为什么选择 VSCode？

VSCode 可能是目前排名第一的代码编辑器。我非常喜欢它。

我认为VSCode如此受欢迎的原因很简单，它满足了所有开发者的需求，甚至包括一些他们之前从未想过自己需要的功能。这就是VSCode的魅力所在——它总能给你带来惊喜。

我认为，打动人心的最佳方法之一，就是在人们意识到自身需求之前，就帮助他们认识到自己的需求。这实际上是营销中一种强大的驱动力，而 VSCode 在这方面做得非常出色。

大多数 VSCode 用户都是 JavaScript 开发者——VSCode 就是为现代技术而生的。如今，流行的 JavaScript 框架与 VSCode 完美兼容——它拥有你所需的一切。

选择文本编辑器时，务必选择最新最好的版本。科技日新月异，你可不想落后。要想成为一名优秀的开发者，时间永远是你的朋友。

我的意思并不是说你应该频繁地从一种语言跳到另一种语言，或者从一种框架跳到另一种框架——那样太疯狂了。我的意思是，也是我在之前的博客里一直强调的，要保持更新，保持敏锐，了解最新的技术，并将它们与你目前使用的技术进行比较，了解它们之间的区别、优缺点，同时关注其支持和社区发展，因为稳定性也很重要。你会惊讶地发现，你的工作效率可以提升多少！

VSCode拥有庞大的开源社区。它的发展和潜力是无限的，未来学习编程和编写代码本身都会变得更加容易。

1. 自动关闭标签

安装这个扩展程序是必须的。编程已经够难够疯狂了，没必要因为缺少一个结束标签而去查找错误。

以后你会感谢我的！

它的功能是自动添加你刚刚添加的开始标签的结束括号，然后将鼠标光标定位在两个标签之间。很酷吧？
自动闭合标签

2. 可视化代码集成终端

在 VSCode 编辑器中集成命令/终端不仅能让你的工作更轻松，还能节省空间。多亏了 VSCode，终端的使用变得非常便捷。Visual
Studio Code 中的集成终端

3. 括号对着色器

对于大多数开发者来说，括号都是个令人头疼的问题，尤其是在处理大型项目时。如果代码混乱不堪，那就更糟了。相信我，括号对着色器能帮你摆脱所有烦恼。

尤其是在使用 JavaScript 时，由于代码中嵌套层级繁多，几乎不可能确定哪些括号对应哪个内容。使用括号对可以帮助您更轻松地找到左括号和右括号。此外，括号的颜色还能提高代码的可读性。立即下载！

不客气！
括号对着色器

4. ESLint/TSLint

此扩展的主要功能是自动格式化代码，确保团队内部代码格式一致。ESLint 也支持自动格式化代码，并且会在出现错误时发出大量警告信息。

它拥有数百万次的下载量是有原因的
。ESLint

5. 代码拼写检查器

如果你像我一样不是以英语为母语的人，英语也不是你的第一语言，甚至可能不是第二语言，那么代码拼写检查器对于确保你的代码没有拼写错误和语法错误非常有帮助。人无完人，无论你的英语是否流利，拼写错误都难以避免——你肯定不想把时间浪费在查找错误上，尤其是在你的代码混乱不堪的情况下。
代码拼写检查器

6. 设置同步

如果你像我一样使用多台电脑，你会发现这个扩展程序非常实用。设置同步功能可以确保你所有电脑/笔记本上的 Visual Studio 设置保持一致。

如果你是一名需要在办公室和家用电脑上工作的开发人员，那么你实际上是在不同的工作站上工作。手动更改两台电脑上的设置非常耗时，因为说实话，我们需要根据项目需要不时地更改设置。为了减轻编程压力，我建议你使用这款扩展程序，这样你所做的所有更改都会自动同步到所有电脑和工作站。
设置同步

7. 更漂亮

前面我提到了 ESLint，它可以帮助你自动格式化代码，使其保持一致性，并显示一些警告和错误。

作为一名 React/Native 开发者，保持代码简洁和规范是必须的——这是不容商量的。代码的正确缩进和分隔至关重要，尤其是在处理较长的代码时——样式、函数和处理程序之间的分隔不仅对你自己，也对你的同事阅读和协作都至关重要。

设置起来超级简单，保存后就会自动格式化。prettier
/prettier-vscode

8. Material 图标主题

这款扩展程序能为你的文件列表添加精美可爱的图标。如果文件是 JavaScript 文件，文件名旁边会显示一个 Material Design 风格的 JavaScript 图标。如果你是视觉型开发者，那么这款扩展程序非常适合你。它拥有数百万用户，广受欢迎。Material
Icon Theme

9. 路径智能感知

这个扩展程序是我离不开的。相信我，它能帮你节省大量时间。我记性不好，而且作为一名前端开发人员，我的工作涉及大量的组件、扩展和包，尤其是在 React 格式化方面，所以我需要一些工具来帮我处理文件路径。处理大型项目简直让人抓狂，而路径智能感知功能就是你的最佳帮手。当你尝试用引号输入路径时，智能感知会自动填充路径或提供建议。

路径智能感知还可以帮助自动补全所有隐藏文件。
路径智能感知

10. 浏览器预览

这款扩展程序是前端开发人员的必备之选。无需再打开 Chrome 浏览器窗口查看代码更改，只需下载此浏览器预览工具，即可在 VS Code 中直接查看所有更改。它会在浏览器中显示代码预览，让您无需再频繁切换浏览器查看细微的更改。这能帮您节省时间和空间。
浏览器预览

11. Chrome 调试器

这是我最喜欢也是最常用的 VSCode 扩展。作为一名前端 Web 和移动应用开发者，Chrome 调试器帮了我很多忙。尤其对于 JavaScript 开发者来说，它能节省大量时间，让你轻松完成细微的修改。它在调试方面尤其有用——能帮你快速发现并解决 bug。

控制台功能强大，可以查找错误发生的代码行和函数，甚至可以查看其数据处理过程。Chrome
调试器

12. Javascript (ES6) 代码片段

如果你是一名 JavaScript 开发者，那么这款扩展程序就是你的新宠。无论你使用哪个 JavaScript 框架，它都能帮到你。但如果你一遍又一遍地重复编写相同的通用代码，那效率就太低了。

这个便捷的代码片段是一个轻量级的库扩展，它绑定了所有标准的 JavaScript 调用，因此只需输入快捷代码，即可在编辑器中自动查看完整的通用代码。此扩展不仅预置了对 JavaScript ES6 的支持，还预置了对 TypeScript、Reactjs、Vue 和 HTML 的支持。JavaScript
(ES6) 代码片段

13. 在线服务器

使用 Live Server，这款 VS Code 扩展程序可以帮助您打开当前项目的实时 Web 服务器。通常情况下，使用 Webpack 等构建器也能实现此功能，但这款扩展程序已被证明更加实用。您只需右键单击并选择“使用 Live Server 打开”，剩下的工作就交给它来完成
。

14. 短尾矮袋鼠

Quokka 被称为现代 JavaScript 开发者的草稿本。它旨在帮助每位开发者进行代码检查，是一个完美的解决方案。

与其他 VSCode 扩展相比，它非常轻巧、高效且功能强大。它能显著提升您的工作效率，提供实时反馈，并立即给予您反馈。

它为每个结果使用固定的颜色类型，以便开发人员可以轻松理解流程的执行情况
。Quokka.js

15. 实时分享

实时共享是 VSCode 文本编辑器中最先进的功能之一，非常适合团队协作。它的一项功能是允许每位开发者与其他开发者实时共享代码片段。

这简直太棒了，它能极大地提高团队协作的效率和生产力。即使在调试过程中，实时共享也能即时共享当前项目——这简直太酷了！

协作者无需安装任何代码库、SDK 或其他任何软件即可连接到其他开发人员的现有代码。团队中的每个人都可以远程协作，共同探索和解决问题。
实时共享

16. GitHub 扩展

如果您的团队正在使用 Github，或者您正在使用 Github 作为您的项目存储库，或者想要使用其他开发者的源代码存储库，那么此扩展程序适合您。

顺便一提，GitHub 现在由微软所有和管理，所以 GitHub 和 VSCode 现在是微软产品的一部分。

使用 GitHub Extension，您现在可以轻松连接其他开发者的仓库、您关注的开发者的仓库，甚至是您自己的仓库。您可以轻松地进行拉取和推送操作——如果您经常使用 GitHub，这将非常方便
。

17. GitLens

GitLens 是另一个很棒的扩展。它极大地增强了 VSCode 现有的 Git 功能，使其能够并排比较之前提交和更改的代码，以及其他一些很酷的功能。GitLens
——Git 的强大助力。

18. NPM

几乎所有现代开发者都知道 NPM 是什么以及它为何如此重要。Node 包管理器是一个扩展程序，可以帮助你管理 package.json 文件。它会在需要依赖项但尚未安装时发出警告，并管理你的 NPM 包的版本。

我遇到的绝大多数 bug 和错误都源于 NPM 包、函数和功能与其他包不兼容而导致的无法正常工作。说真的，缺少必要的依赖项，或者缺少兼容版本，真的让人很抓狂！

这个 VSCode 扩展是必备的：
npm

19. 美化

Beautify 是另一款优秀的代码格式化扩展程序，几乎与我之前提到的 Prettier 功能相同。它目前的下载量已接近 1200 万次，所以无需赘言，您肯定已经明白这款扩展程序的实用之处。

它可以格式化用 Javascript、JSON、Sass、CSS 和 HTML 编写的代码。
美化

20. Live Sass 编译器

如果您喜欢使用 Sass 进行样式设计，或者只是因为项目应用要求而使用 Sass，那么这款 VSCode 扩展程序正适合您！

它能实时将你的 SASS/SCSS 文件编译成 CSS 文件，并自动在浏览器中提供应用或编译后样式的实时预览。
实时 Sass 编译器

21. 埃米特

自从开始使用 VSCode 以来，我就一直在使用 Emmet。它能帮助每位开发者提升编写代码的速度。使用这款扩展程序后，你很快就会发现没有它该如何编程。

真实故事：
秘银埃米特

这里还有一个额外福利：Emmet 文档速查表：
速查表

22. VSCode 图标

这个图标是为我们的前端开发人员准备的。它和我之前提到的 Material 图标类似，但设计不同。作为前端开发人员，我们都喜欢看得一清二楚，对吧？所以这个图标可以帮助你了解你的文件类型，以及它们是 HTML、CSS、Javascript 等等
。vscode-icons

23. 颜色选择器

颜色选择器扩展程序可帮助您轻松地在 CSS 文件中选择颜色。它会立即反映或应用到您当前正在处理的属性上。如果您更喜欢使用 RGBA 颜色，它也同样适用。
颜色选择器

24. ES7、React、Redux 和 GraphQL 代码片段

这是为目前正在使用 React 等 JavaScript 框架以及其他与其生产和复杂应用程序兼容的技术的高级开发人员准备的。

反复输入标准代码效率低下。借助这段代码片段，您只需输入快捷代码即可轻松创建基于类的组件、函数式组件、导入语句、生命周期方法等等。自从我开始使用 Reactjs 和 React Native 以来，这便是我最常用的扩展之一。ES7
React/Redux/GraphQL/React-Native 代码片段

25. REST客户端

另一个高级工具——Rest Client 扩展程序，在您使用其他第三方工具和 API 时非常有用。如果您需要轻松发出 HTTP 请求，它将非常实用。

此扩展程序允许您直接在代码编辑器中轻松调用端点。它节省时间——您无需在浏览器或 Postman 之间来回切换即可发出请求。REST
客户端

感谢大家的阅读！