Visual Studio Code，或者称作VS Code，是一个广为人知且评价很高的代码编辑器，它有许多特性和扩展功能，以增强开发体验。使用VS Code的主要好处之一是它的灵活性，允许开发人员根据自己的特定需求进行自定义。

此外，VS Code还非常轻便快速，适合处理大型项目或者资源有限的情况，它包含了调试工具、终端和Git集成等功能，使其成为开发人员的全能选择。

不仅如此，在Visual Studio Marketplace中还有众多VS Code扩展可供选择，这使它成为开发者社区中的领先IDE。这些扩展可以帮助开发人员编写整洁且无bug的代码，让开发人员的生活更加愉悦。

下面我们将按照以下类别列出顶级的Visual Studio Code扩展：

增加工作效率的VS Code扩展

代码片段的颜色扩展

版本控制的VS Code扩展

代码格式化和linting的VS Code扩展

调试和故障排除的VS Code扩展

针对javascript、react、java、html和css的VS Code扩展

让我们开始吧！

一、以下是针对提高生产力的VS Code扩展

1、GraphQL

GraphQL Visual Studio Code 扩展提供了一系列工具，帮助您编写、验证和测试 GraphQL 代码。GraphQL 扩展包括自动完成功能，建议您在输入时使用的字段和参数，使编写有效的 GraphQL 代码更加容易。这个功能可以节省时间，减少语法错误的可能性。

该扩展还带有内置的linter，可以检查您的代码中的错误并建议修复方法。使用此扩展可以避免 GraphQL 错误，提高效率。

2、Remote-SSH

您可以使用VS Code扩展从安全的角度连接到远程服务器，而不需要额外的软件或终端窗口。Remote-SSH 允许您在熟悉的 Visual Studio Code 界面内轻松访问、编辑和传输文件到和从远程服务器。您可以充分利用 Visual Studio Code 的能力，而不受本地设置的限制，能够在远程机器上运行命令、调试代码，甚至使用扩展功能。

Remote-SSH是一个必不可少的VS Code扩展。尝试使用它来发现使用VS Code扩展远程工作的强大和方便。这不仅可以简化您的工作流程，还可以提高您的整体生产力。

3、Settings Sync

开发人员经常使用文本编辑器创建 Web 应用程序。手动在多个设备之间维护相同的设置非常不方便。手动同步设置也可能耗费大量时间，并且在多个设备上提供不一致的体验。

使用Settings Sync VS Code扩展，您可以轻松地在多个设备之间同步设置，减少配置时间，甚至与他人共享设置。

4、Auto Rename Tag

VS Code可以自动突出显示匹配的标签，并在使用开标签时添加闭标签。Auto Rename Tag扩展可以在您编写代码时重命名更改的标签。例如：

• 当您重命名一个HTML / XML标记时，此标记将自动重命名所有配对的HTML / XML标记

• 您还可以在Javascript中使用自动重命名标记扩展功能 - 只需将文件类型保存为.js。它会自动配对javascript标记并重命名它。

该扩展仅支持HTML、XML、PHP和JavaScript。

5、Tabnine

Tabnine是一款专注于提高生产力的VS Code扩展。它是一款人工智能代码助手，可以实时自动完成您的代码，加速您的开发过程。它支持所有流行的编码语言和IDE。

Tabnine具有类似于IntelliSense的AI辅助代码完成功能。该扩展可以通过上下文和语法预测和建议您的下一行代码，帮助您更快地编写代码。

6、CSS Peek

使用CSS Peek VS Code扩展，您只需将鼠标悬停在一个HTML元素上，即可显示一个窥视窗口，其中显示应用于该元素的CSS样式。然后，您可以通过单击窥视窗口跳转到CSS代码来轻松编辑样式。这个功能可以帮助您避免每次手动搜索CSS代码的麻烦。

CSS Peek还支持CSS预处理器，如SCSS、Less和Sass，因此无论预处理器是什么，您都可以将其用于所有项目。

二、VS Code 扩展功能：代码片段配色

7、Bracket Pair Colorizer DLW

Bracket Pair Colorizer DLW是一款用于VS Code的扩展，可以自动给某些字符上色，帮助开发人员确定代码的嵌套深度。

它支持多种语言，并允许开发人员定义他们在代码中计划使用的不同括号的颜色。默认情况下，它会匹配 (), {} 和 []，但您可以使用其他括号字符，并定义它们的颜色。使用此扩展可以轻松地发现开放和关闭括号，并更清晰地了解代码结构。

8、VS Code Icons

尽管Visual Studio Code是一款强大的代码编辑器，但其默认图标可能会让人感到乏味和缺乏灵感。这就是图标主题的作用。VS Code Icons扩展可以通过识别文件类型（如React、Javascript、HTML、CSS等）来帮助您查看您的文件。

图标主题是快速简便的方式来改变VS Code编辑器界面的外观和感觉，它们可以对您的整体体验产生重大影响。

9、Material Icon Theme

Material Icon Theme是一款广受欢迎的VS Code扩展，为您的代码编辑器提供了一个时尚而现代的外观。该扩展替换了VS Code默认的材质设计图标，为您的界面提供了干净而专业的外观。

它包括许多图标样式，包括彩色、单色和轮廓图标。这意味着您可以选择最符合您需求和偏好的样式。您可以放心，所有的编码需求都可以通过一组广泛的文件夹和文件图标进行视觉分类，让您快速访问所需内容。

10、Peacock

Peacock是一款VS Code扩展，可以为您的编程体验添加一些色彩。该扩展可以让您根据文件类型、文件夹或工作区等标准对编辑器选项卡进行着色。

Peacock的一个显著特点是其适应性。您可以更改用于每个标准的颜色，甚至设计自己的颜色方案。这使您可以根据自己的喜好定制界面，并区分不同类型的文件和项目。

三、VS Code版本控制扩展

11、Live Server

Live Server是一款VS Code扩展，可以自动重新加载您的网页。它消除了手动刷新页面的需要。

您还可以指定自定义端口或主机名，这在处理多个项目或团队环境中非常有用。Live Server的另一个有用功能是可以在工作环境内的任何HTML文件或项目上运行服务器。

12、Git History

Git History扩展可以在树形视图中显示提交历史记录，使开发人员可以轻松了解代码更改的进展。这种视图使得浏览不同的提交和找到您正在寻找的更改变得简单。

此VS Code扩展还包括强大的搜索功能，允许您快速按消息、作者或哈希值查找特定的提交。它还可以比较提交，使您可以轻松地查看代码不同版本之间的区别。

13、Git Lens

Git Lens扩展可以帮助开发人员可视化、导航和理解项目的Git历史记录。Git Lens还增加了一个强大的拆分视图，使开发人员可以轻松地可视化提交和分支之间的差异。

它允许开发人员按作者、文件、提交消息和其他标准搜索项目的提交历史记录。

14、Docker Explorer

Docker Explorer是一款VS Code扩展，可以识别和管理当前正在运行的容器和映像。它允许开发人员轻松地启动、停止和重新启动容器，检查日志和属性，甚至通过名称或ID定位特定的容器或映像。

它可以从映像生成新容器，并从注册表推送和拉取映像。总的来说，它简化了容器的创建和管理，使得在实时环境中测试和部署您的代码变得简单。

四、用于代码格式化和代码校验的VS Code扩展

15、Prettier

Prettier是最流行的格式化和代码校验工具，可使您的代码符合业界最佳实践。它还确保您的团队生成视觉上无缝的代码，因此不再争论应使用多少制表符或空格，或括号应放在哪里。

使用Prettier Visual Studio Code扩展可以让您的代码看起来更好。

16、Beautify

Beautify是Prettier扩展的替代品，已安装了700万次。Beautify是另一个可靠的代码“美化器”，通过最小化对代码的干扰来对代码进行校验和格式化。您可以使用它来轻松地格式化任何语言编写的代码。

17、Better Comments

Better Comments是一款VS Code扩展，可以根据注释类型格式化注释。您可以使用不同风格的注释，包括待办事项、问题、警告等。

此扩展还允许您按重要性对注释进行优先级排序，并带有强大的搜索功能，可以通过关键字或类型快速查找特定注释。

18、ESLint

ESLint是一款VS Code扩展，可以在错误和潜在问题变成问题之前检测它们。它提供了一套强大的规则，可以根据您的特定要求进行定制，从而使您能够执行自己的编码约定。

它可以与其他流行的扩展集成，例如Prettier，允许您根据您的代码校验规则自动格式化代码。

19、MarkdownLint

MarkdownLint扩展是一款用户友好的错误警告和纠正工具。可以通过单击代码编辑器中突出显示的问题来访问错误详细信息。

MarkdownLint还与其他流行的扩展集成，例如拼写检查器，允许您自动检查Markdown文件中的拼写错误。

五、用于调试和故障排除的VS Code扩展

20、Javascript Debugger

Javascript Debugger扩展可以在代码中创建断点和步骤。这使得开发人员可以暂停代码执行并检查变量和调用堆栈，从而轻松地识别和修复错误。

此VS Code扩展配有交互式控制台，使开发人员能够评估表达式、执行代码并实时测试和调试代码。它为所有类型的JavaScript项目提供了全面的调试体验。

21、Code Spell Checker

使用Code Spell Checker VS Code扩展避免拼写错误。它在您输入时会简单地突出显示任何拼写错误。它具有易于使用的错误修复界面，可以通过右键单击代码编辑器中突出显示的问题来访问。它可以检查多种语言，确保您的代码在任何语言中都是无误的。

22、Turbo Console Log

使用Turbo Console Log扩展，您无需手动添加日志语句即可调试代码。它可以让您通过单击一个按钮向您的代码添加控制台日志语句。

它具有用于评估表达式和运行代码的交互式控制台。它可以帮助开发人员实时测试和调试代码。您还可以自定义日志语句的输出，并通过突出显示对象和变量来实现更可读的格式。

23、Regex Previewer

Regex Previewer为您的代码提供正则表达式模式。这些模式会在实时中被用于匹配一些样本文本，以检测是否匹配高亮文本。使用此扩展，您可以快速识别和纠正正则表达式模式中的错误。

此外，该扩展还包括有关正则表达式语法的广泛文档以及常用正则表达式模式库，可以轻松地复制和粘贴到您的代码中。

六、针对语言的VS Code扩展

24、javaScript Code Snippets

在JavaScript项目中，您经常需要通过复制和粘贴来重复使用各种代码块。这项任务可能需要很长时间，因此使用简单的键盘快捷键获得大量不同的JavaScript代码片段列表可以帮助您更加高效地工作。

JavaScript代码片段是预先构建的代码片段，您可以轻松地包含在您的代码中。它还支持特定的JavaScript库和框架，例如Angular、Vue.js和Node.js。

25、Reactjs Code Snippets

Reactjs Code Snippets VS Code扩展提供了整洁打包的预编写模板，帮助开发人员提高工作流程和代码速度。您只需要键入触发命令即可获取所需的代码片段。

您可以使用此工具来减少编写代码所需的时间，并专注于解决现实世界的问题。

26、Java Language Support

Java Language Support（Java语言支持）包含多个扩展，用于提供编码辅助、调试、linting（代码检查）、格式化和测试等功能。其中最受欢迎的扩展包括：

• Java Development Kit（JDK）11或更高版本：您需要JDK来构建和运行Java应用程序。它提供了完整的语言支持，包括语法高亮、代码补全和调试等功能。

• IntelliCode Java Test Runner：此扩展使得在项目中运行和调试单元测试变得轻松。它与流行的测试框架（如JUnit、TestNG等）集成，提供无缝的测试体验。

• Debugger for Java：此扩展具有丰富的功能，使您能够设置断点、检查变量、逐步执行代码等等，使调试更加容易。

• Language Support for Java by Red Hat：它有助于在Java开发中维护稳定和安全的平台，并提供构建、部署和管理Java应用程序的工具。

总体而言，Java Language Support包使您的Java环境更加高效，简化您的Java开发体验。

27、HTML CSS Support

HTML CSS Support 是一款用于文本编辑器和集成开发环境（IDE）的扩展，提高了对 HTML 和 CSS 开发的支持。该扩展提供了以下附加功能：

• HTML 和 CSS 的 IntelliSense：这是一种代码完成功能，可以在编写代码时提供 HTML 标记、属性、CSS 属性、值和单位的建议。

• Emmet 支持：它生成 HTML 和 CSS 的简写表示法，帮助您编写简洁的语法，并通过仅需几个按键将其扩展为完整的 HTML 或 CSS 代码。

• CSS 类名自动完成功能：自动完成 HTML 文档中的 CSS 类名。

• HTML 和 CSS 格式化和 linting 选项：这是一个必备的工具，可以为更好的可读性格式化和结构化 HTML 和 CSS 代码。

• 内置的 CSS 颜色预览器：如果您曾经为复杂的颜色方案而苦恼，或者在微调网站颜色时感到迷失，此功能可以拯救您。它在您的 CSS 颜色代码中显示颜色预览。

总结

在 Visual Studio Marketplace 上有很多扩展可以帮助开发人员提高效率并提升生产力。我们列出了最重要的 Visual Studio 代码扩展，可以对开发人员的生活产生重大影响。尝试它们，通过这些扩展简化您的工作流程。

使用这些扩展来增强您的 Visual Studio 代码编辑器，获得更顺畅的编码体验！

在文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

原文：
https://medium.com/zipyai/top-27-visual-studio-code-extensions-for-2023-b7cdc31adade

作者：Zipy

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正