面向前端开发人员的 19 个强大的 VS Code 扩展

Visual Studio Code 是 Microsoft 强大的代码编辑器，已迅速成为开发人员社区的最爱。Visual Studio Code Marketplace中提供的各种扩展显着增强了编辑器的多功能性。这些扩展对于 Web 开发人员特别有利，它们提供了简化编码和开发各个方面的工具和功能。

在这篇文章中，我们深入研究 VS Code 扩展的世界，特别关注前端开发。在探索了众多扩展之后，我整理了一个列表，列出了那些因其直观性、易用性和便利性而脱颖而出的扩展。虽然此列表内容丰富，但市场随着新的和改进的扩展而不断发展，因此我鼓励您进一步探索并发现最适合您的开发需求的工具。

如何安装 VS Code 扩展？

在 Visual Studio Code 中安装扩展非常简单，您可以在代码编辑器中完成。在 VS Code Marketplace 中，每个扩展都有自己的页面，您可以在此页面顶部找到可安装给定扩展的命令。

该命令始终以术语开头ext install。要安装扩展，只需按CTRL+PVS Code 内部启动“快速打开”面板，将此命令复制粘贴到其中，最后重新启动代码编辑器即可使新扩展工作。

对开发人员有用的 VS Code 扩展

1、HTML Snippets

如果您想经常在 Visual Studio Code 中编写 HTML，HTML Snippets 扩展可以作为一个方便的工具，因为它添加了对 HTML 的详细支持。尽管 VS Code 对 HTML 具有基本支持，例如语法提示，但 HTML Snippets 扩展了解更多。

此扩展最有用的功能可能是，当您开始键入 HTML 标记的名称（不带起始尖括号）时，HTML 片段会快速显示可用选项的列表，以及每个选项的简短信息。

当您单击所需的元素时，HTML 片段会添加完整的 HTML5 标记及其最常见的属性。例如，如果您想向文档添加链接（锚标记），只需a在 VS Code 中输入，在弹出框中选择正确的选项，HTML 片段就会<a href=""></a>毫不费力地将必要的片段插入到您的编辑器中。

该扩展的作者还注意删除已弃用的元素，因此如果您想使用在弹出列表中找不到的 HTML 标记，则值得检查它是否仍然有效。

2、Turbo-console-log

有没有发现日志消息有点乏味？Turbo-console-log 扩展可以为您提供帮助。它使创建日志消息变得轻而易举。只需选择要检查的变量并按Control + Alt + L即可。

瞧！之后会出现详细的日志消息。这不仅仅是添加消息；您可以快速注释、取消注释或删除文档中的所有日志，使您的编码更顺畅、更高效。

3、Prettier

Prettier 是一个关心一致性的代码格式化程序。这就像你的代码有一个严格的编辑器，确保一切看起来统一。当您保存时，Prettier 会接管，解析并重新格式化您的代码以遵循设定的规则。

它考虑行长度，整齐地包装代码，并允许您选择要格式化的语言。告别代码中的样式不一致！

4、HTML CSS Class Completion

如果您需要在项目中使用许多CSS 类，HTML CSS 类完成功能可能是一个有用的扩展。我们开发人员经常遇到这样的情况：我们不能完全确定类的确切名称，但它只是作为被动知识存在于我们的脑海中。

这个智能扩展为这个问题提供了一个解决方案，因为它获取当前工作区中所有 CSS 类的名称，并显示有关它们的列表。

假设您想要使用 Zurb Foundation 创建一个站点，并且想要使用小网格。您不记得这些类是如何准确命名的，但您知道它们具有语义名称。

使用 HTML CSS 类完成功能，您只需开始键入单词small，可用选项就会立即出现在屏幕上，因此您可以轻松选择所需的选项。

5、Import Cost

关心您的代码的性能吗？导入成本扩展就像一个警惕的助手，在您编码时密切关注性能。它可能不会分析您的整个包，但它会在大量导入使您的用户陷入困境之前提醒您。

当您引入第三方库时，导入成本会在您的代码旁边显示其大小，帮助您维护精简、高效的项目。

6、VSCode Edge DevTool

适用于 Visual Studio Code 的 Microsoft Edge 开发人员工具将浏览器 DevTools 的强大功能无缝集成到 VSCode 环境中，特别是对于 Microsoft Edge 用户而言。此扩展消除了在处理项目时在代码编辑器和浏览器之间切换的需要。

凭借查看运行时 HTML 结构并与之交互以及修改样式和布局等功能，它提供了一种在 VSCode 中处理诊断和调试的有效方法。

7、GitLens

GitLens 为您的代码库提供了宝贵的见解。它可以帮助您了解谁对代码进行了更改、原因以及时间。该扩展非常适合可视化代码作者，让您一目了然地显示不同团队成员的贡献。

GitLens 使导航和探索 Git 存储库变得毫不费力，它具有比较命令等功能，可提供更改及其对项目影响的详细视图。

8、View in Browser

在浏览器中查看是 Visual Studio Code 的简单但功能强大的扩展。它可以让您在编码时在浏览器中快速查看工作结果，从而促进前端开发。您可以通过按CTRL + F1键盘快捷键直接从 VS Code 在默认浏览器中打开 HTML 文件。

请注意，“在浏览器中查看”仅支持 HTML，因此如果您想查看您的站点，则需要打开 HTML 文件。您无法直接从 CSS 或 JavaScript 文件访问浏览器。

9、VS Code Chrome debugger

VS Code Chrome 调试器对于经常调试客户端 JavaScript 的开发人员来说是一个游戏规则改变者。它允许您直接从 Visual Studio Code 环境调试在 Chrome 中运行的 JavaScript。

通过使用 Chrome 调试器协议，此扩展将 Chrome 无缝连接到 VS Code，从而无需离开编辑器即可实现设置断点、监视变量和查看调用堆栈等功能。

10、File Utils

File Utils 是一个功能强大的工具，可以让您在编辑器中轻松处理文件。它允许您使用简单的命令创建、复制、移动、重命名和删除文件和文件夹。

此扩展旨在节省您管理项目文件结构的时间和精力。此外，它还具有大括号扩展功能，有助于通过自动生成字符串来快速设置复杂的文档结构。

11、Debugger for Chrome

Chrome 调试器由 Microsoft 自己构建，目前是第四大最常下载的Visual Studio Code 扩展。

Chrome 调试器可以在 Google Chrome 中调试 JavaScript，而无需离开代码编辑器。这意味着您不需要使用浏览器看到的转译 JavaScript，但可以直接从原始源文件执行调试。请参阅此演示以了解其工作原理。

该扩展具有像样的调试器所需的所有功能，例如断点设置、变量监视、单步执行、方便的调试控制台以及许多其他功能（请参阅第一个版本的功能列表）。

要使用此扩展，您需要在启用远程调试的情况下启动 Chrome ，并设置正确的launch.json文件。后者可能需要一段时间，但您可以在 GitHub 上找到有关如何正确执行此操作的详细说明。

12、File Ops

File Ops 允许您向文件添加标签和别名，从而增强您的项目组织。此功能简化了项目中重要文件的查找和切换。

该扩展在跟踪大量文件方面表现出色，提供了一种列出所有标签的便捷方法。此外，它还可以轻松地在同一目录中查看和切换相关文件，例如 .css 和 .js 文件。还提供信息视频来帮助您了解其所有功能。

13、Gremlins tracker

Gremlins Tracker 是您发现代码中隐藏或棘手字符的首选工具。它突出显示零宽度空格和不寻常的引号等字符，这可能会导致意外错误。

该工具使用颜色编码系统来指示这些角色造成的伤害程度。它还使用 Gremlins 图标标记行，并在您将鼠标悬停在这些字符上时提供有关这些字符的详细提示，帮助您维护干净且无错误的代码。

14、JSHint

Visual Studio Code 的 JSHint 扩展将流行的JSHint JavaScript linter直接集成到代码编辑器中，因此您可以在提交错误后立即收到通知。默认情况下，JSHint 扩展使用 linter 的默认选项，您可以借助配置文件进行自定义。

这个扩展的使用非常简单，因为 JSHint 用红色标记错误，用绿色下划线标记通知。如果您想了解有关问题的更多信息，只需将鼠标悬停在带下划线的部分上，JSHint 就会立即浮动一个包含问题描述的标签。

15、Polacode

Polacode 改变了您以视觉方式共享代码的方式。它就像代码的宝丽来相机一样，简化了在 Visual Studio Code (VS Code) 中捕获美观的屏幕截图的过程。

您可以直接在编辑器中轻松编辑这些屏幕截图，调整代码容器的大小，并使用方便的命令控制图像的外观。Polacode 非常适合以最具视觉吸引力的方式呈现您的代码。

16、jQuery Code Snippets

jQuery 代码片段可以极大地加快 Visual Studio Code 中的前端开发速度，因为它可以让您快速编写 jQuery，而不会出现基本语法错误。jQuery 代码片段目前有大约130 个可用片段，您可以通过键入正确的触发器来调用。

除一个之外的所有 jQuery 片段均以jq前缀开头。一个例外是将匿名函数插入编辑器的func触发器。

当您不完全确定正确的语法并想腾出时间检查文档时，这个方便的扩展可以为您提供方便的帮助。它还可以轻松快速地滚动浏览可用选项。

17、Bower

Bower VS Code 扩展可以通过将Bower 包管理器集成到 Visual Studio Code 中，使您的 Web 开发工作流程更加直观。

如果您使用此扩展，则无需在终端和编辑器之间来回切换，而是可以在 Visual Studio Code 中轻松执行包管理任务。

Bower 扩展将引导您完成项目bower.json文件的创建，您还可以安装、卸载、搜索、更新包、管理缓存以及使用它执行许多其他任务（请参阅完整功能列表）。

您可以通过按启动命令面板F1，在输入栏中键入“Bower”，单击出现的下拉列表中的“Bower”选项，然后选择适当的Bower 命令来访问 Bower 相关命令。

18、Better Comments

Better Comments 为您的代码注释注入了新的活力，使它们更加用户友好且在视觉上易于区分。该工具可以轻松地将评论分类为警报、查询、待办事项和突出显示等类型，帮助您快速识别每个注释的性质和重要性。

无论是有关已弃用方法的警报还是有关未完成任务的提醒，此扩展都能确保清晰度。它还为注释掉的代码提供样式选项，有助于维护干净高效的代码。

19、Git History

Git 历史记录可以跟踪 Visual Studio Code 中 Git 项目的更改。当您想要为更大的 Github 项目做出贡献，并且需要一种方法来快速检查其他开发人员所做的修改时，此扩展特别有用。

安装了 Git History 扩展后，您可以查看整个文件或其中特定行的历史记录。您还可以比较同一文件的先前版本。

如果您在命令面板 ( ) 中输入“Git”一词F1，在下拉列表中选择“Git”，最后选择您需要的命令，则可以访问与 Git 历史记录相关的命令。请注意，您需要先打开要查看其历史记录的文件，然后才能对其执行任何操作。