Web 开发人员必备的 10 大 VSCode 扩展

VSCode，即 Visual Studio Code，是 2020 年最流行的 Web 开发编辑器。VSCode 最受欢迎的功能之一是它的扩展。每个月，世界各地的人们都会构建开源扩展来提升 VSCode 的使用体验。我将向你展示我最喜欢的 10 个 VSCode Web 开发扩展。

安装 VSCode 和 VSCode 扩展

为了使用 VSCode 的扩展，你需要下载它。你可以在这里下载。

要安装扩展，请点击扩展图标（如下所示），然后输入扩展名。找到后，点击“安装”即可将扩展安装到 VSCode。

我的十大

10：更好的评论

来源

Better comments 是一款扩展程序，它可以通过添加警报、信息、TODO、问题等注释来改进你的代码。这是一个非常棒的扩展程序，可以提高你的代码可读性，并使注释排序更整齐。

9：错误镜头

来源

Error Lens 是一款扩展程序，它会在错误出现的行上显示错误（如上所示）。当您查找导致整个应用程序崩溃的小错误时，此扩展程序能帮您大忙。此外，此扩展程序高度可自定义，您可以更改颜色、字体、字体大小、排除某些错误等等。

8：进口成本

来源

此扩展程序会在您导入的每个模块/包旁边显示导入成本（顾名思义）。了解您是否正在优化导入和依赖项非常重要，这样才能确保为用户提供最快、最高效的体验。此扩展程序与 ES6 import 和 ES5 及以下版本的 require 语法兼容。

7：括号对着色器 2

来源

此扩展程序会为匹配的括号和圆括号赋予相同的颜色。它可以避免您花费太长时间寻找正确的右括号。如果您使用的语言使用括号而不是缩进（抱歉，Python 用户），那么这个扩展程序是必备的。

6：Material 主题和Material Icon 主题

资料来源：我使用 Palenight 主题和 Material Icons 学习 Flutter

这个扩展为你的文件提供了精美的图标和精彩的主题。Material 主题中我最喜欢的是 palenight 主题（有很多主题）。在 VSCode 的设计/主题方面，这两个扩展都是我的最爱。

5：HTML 代码片段

来源

这个扩展允许你输入类似 div.container 和 get 的内容<div class="container"></div>。它能让你快速编写 HTML。我非常喜欢这个扩展的主要原因是它对 JSX 的支持。我是一名 React 开发者，它让我的工作效率大大提升。

4：实时服务器

来源

这是在几秒钟内启动并运行服务器的最简单方法。只需点击一下按钮，您的网站即可在本地启动并运行。使用此方法（而不是将 index.html 文件上传到 Google）的好处是，每次保存文件时，更改都会直接生效（无需重新加载）。

3：Git Lens

来源

Git Lens，拥有超强功能的 Git。这款扩展是 Git 和 GitHub 的最佳选择。它可以帮您了解每行代码的贡献者，无缝导航和探索 Git 代码库，并进行强大的代码比较等等。如果您使用 Git 和 GitHub，这款扩展绝对是您的必备之选。

2：自动重命名标签

来源

自动重命名标签是一个扩展程序，当其中一个标签更改时，两个标签都会更改（如上所示）。我非常喜欢这个扩展程序，因为它支持 JSX。这个扩展程序能够显著提高你的工作效率。

1：更漂亮

来源

就在这里！我最喜欢的 VSCode Web 开发扩展。Prettier 在格式设置和效率方面堪称救星。在设置中配置完成后，Prettier 会在保存时自动格式化文件。与其每天花费数小时让代码看起来干净利落，不如使用 Prettier。这款扩展是目前榜单上最受欢迎的扩展，截至撰写本文时，下载量已超过 8,750,000 次。正因如此，Prettier 是我最喜爱的 VSCode Web 开发扩展。

结束语

希望您能下载一些新的 VSCode 扩展！如果我遗漏了任何扩展，请在评论区告诉我。

亨利