面向高效开发人员的40多个最佳VSCode扩展合集

2021年11月28日02:21:47 发表评论 1,725 次浏览

在编写代码时，高效的工作空间不仅仅需要找到合适的代码编辑器。开箱即用，VS Code 是由开发人员为开发人员制作的。根据 2021 StackOverflow 调查，71.06% 的受访者使用 Visual Studio Code 作为首选 IDE。

使 VS Code 如此受欢迎的原因在于Marketplace 中可用的扩展数量。有超过 30,000 个扩展在流通，选项几乎是无限的——同时也是势不可挡的。

根据面向程序员的时间跟踪工具 WakaTime 的数据，Visual Studio Code 在 2020 年的开发工作时长超过 1800 万小时。此外，Visual Studio Code 占开发人员使用的所有编辑器跟踪的总时间的 46%。

常用的VSCode扩展有哪些？你应该选择哪些扩展？哪些扩展最能提高工作效率？代码版本控制？美学？格式化和linting？如果你想要它，可能在Marketplace 的某个地方有一个扩展。

这里有 40 多个 VS Code 扩展——经过精心策划、排序和分类，本文提供的最佳VSCode扩展合集可帮助你提高生产力并使你作为开发人员更有效，下面是完整的VSCode扩展排行榜：

生产率

GraphQL
哪个VSCode扩展最好？在 VS Code 市场上的下载量超过 50 万次，GraphQL 是一个值得关注的新兴插件扩展。GraphQL 本身也越来越受欢迎和实现，这意味着如果你在下一个项目中遇到它，VS Code 上的 GraphQL 扩展是必须的。

该插件由官方 GraphQL 基金会维护，这意味着它积极支持并维护最新的实现。

Tabnine
Tabnine 是你的多合一 AI 助手，可帮助你更快地编写代码。迄今为止，该插件已安装超过 200 万次，由机器学习驱动，适用于你项目的现有模式。在其预测性代码自动完成功能中，Tabnine 结合了其他下载和使用该插件的人的知识。
Tabnine 不仅仅是一个自动完成——它是一个独特的预测性 AI 驱动的代码完成，它可以提高你的工作效率，你使用它的次数越多。
YAML
YAML 设置起来可能很棘手。一个杂散的空格或不正确的选项卡可能会导致 YAML 文件无效。YAML 插件由 Red Hat 维护并充当验证工具。

Remote – SSH
于 2019 年发布，远程 SSH 的下载量已超过 500 万次。此扩展允许你使用远程服务器作为你的开发环境。你的连接通过 SSH 保持安全，并且使用 Remote – SSH，你可以直接在 VS Code 中进行连接。通过这种设置，你可以在云中运行一台机器，将你的工作流集中到一个源，并且你正在使用的机器上不需要有源代码。
Settings Sync
在多个设备上工作？设置同步解决了你无法使用工作区设置的烦人问题。借助设置同步，你可以在 GitHub Gists 的帮助下将代码片段、主题、文件图标、键绑定和扩展带到任何需要的地方。Settings Sync 最好的部分是它完全免费、开源，并且有超过 200 万次安装。
Auto Rename Tag
由 TabNine 赞助，Auto Rename Tag 于 2016 年首次在 Marketplace 上推出。此后下载量已超过 600 万，并被开发人员广泛使用，以帮助重命名配对的 HTML/XML 标签的简单但重复繁琐的任务.我们都去过那里——试图寻找标签对，尤其是当有嵌套、{{双卷曲}}和逻辑条件时——但由于它是多么手动，所以我们沮丧地举起了双手。自动重命名标签可以节省时间和开发人员的理智。
CSS Peek
如果你在前端工作，CSS 是工作流程中不可避免的一部分。随着项目的发展，你的样式也会满足要求。CSS 本质上是线性的，这可能令人沮丧，特别是如果你想检查样式而无需滚动和遍历所有不同的文件来找到你想要的内容。CSS Peek 是一个 VS Code 扩展，只需单击几下，你就可以转到工作区中的 CSS 定义和符号。
Code Runner
常用的VSCode扩展有哪些？有时，你不需要运行整个项目，只需要其中的一小部分。这就是 Code Runner 的用武之地。这个 VS Code 插件支持多种语言，可以通过预定义的键盘快捷键或在鼠标的帮助下运行高亮代码。
由 TabNine 赞助，这个节省时间的扩展深受开发人员的喜爱，并已安装超过 900 万次。

它带有内置的 Kubernetes 语法支持，并具有五个核心功能——验证、文档大纲、自动完成、过度支持以显示模式提供的描述和格式化程序。

VSCode扩展排行榜：美学生产力工作流程

Material Icon Theme
当你刚刚获得文件和文件夹时，一切看起来都一样。随着项目的增长，你很快就会失去直观地扫描文件结构的能力。Material Icon Theme 通过安装受 Google Material Design 启发的视觉上吸引人的图标，为你提供这种力量。
使用广泛的文件夹和文件图标集，你可以确保所有编码需求都进行了可视化分类，使你可以轻松快速地访问所需内容。
Bracket Pair Colorizer
老实说——我们都曾在某个时候失去了我们的括号和大括号。当你处理嵌套和逻辑条件时，情况会变得更糟。Bracket Pair Colorizer 通过为每一对附加不同的颜色来解决我们代码中的括号对搜索问题。

这意味着如果你有多个括号，为了我们的方便和代码生产力，它可以很容易地进行颜色匹配。
Peacock
有时，你需要打开多个 VS Code 实例。可能是你同时处理多个代码库，或者需要在项目之间快速切换而无需打开和关闭它们。通过颜色，Peacock 可以轻松识别工作空间。你所要做的就是打开一个 VS Code 工作区，按 F1 打开命令面板，输入 Peacock，然后从编辑器的预定义颜色中进行选择。
Colorize
最佳VSCode扩展合集：颜色的使用是一种强大的生产力工具。当合并到你的代码中时，它可以加快你的工作流程。Colorize 是在考虑 CSS 的情况下创建的，可帮助你通过 css 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba 和 argb 的彩色背景立即可视化 CSS 颜色。它支持你的标准 CSS、SASS、LESS、post CSS、手写笔和 XML。
vscode-icons
如果你喜欢受材料设计启发的图标，那么 vscode-icons 也是一个不错的选择。拥有超过 900 万次安装，vscode-icons 支持全球化，并能够使用你的图标包进行自定义，自动检测你的项目，并允许自定义配置。
Icon Fonts
哪个VSCode扩展最好？你是项目中Font Awesome的用户吗？或者你使用Android 图标？你是否想在不需要不断快速查阅文档的情况下进行原型设计？Icon Fonts 是一种生产力工作工具，它结合了自动完成和 IntelliSense，可将各种图标字体合并到前端的 HTML 中。Icon Font 插件支持主要的图标字体，例如Creative Commons Icon Fonts、Font Logos和Bootstrap Glyphicons，是生产力必备的插件。
Live SASS Compiler
SASS 是保持 CSS 集中和组织的绝佳方式。但是，当你没有实时重新加载时，处理起来也很痛苦。Live SASS Compiler 可以轻松查看你的更改如何影响你的视觉输出。这个 VS Code 扩展通过自动实时重新加载将你的 SASS 和 SCSS 文件实时编译/转换为 CSS 文件，而无需做任何额外的事情。

最佳VSCode扩展合集：代码、版本控制和协作

Live Server
Live Server 是市场上安装最多的 VS Code 扩展之一，安装量超过 1500 万。为什么？因为它可以让你将你的 VS Code 编辑器变成一个功能齐全的 IDE。功能包括通过实时重新加载启动本地开发服务器、包含用于启动和停止服务器的快捷方式、热键控制、远程连接和 Chrome 调试。
GitLens
GitLens 在 Live Server 之后成为热门，安装量超过 1100 万次，获得近乎完美的 5 星评级。GitLens 旨在帮助开发人员快速导航和了解他们的代码是如何更改、编辑、更改和导致冲突的。有时，在控制台中处理 git 的过程可能会让人不知所措。GitLens 通过将控制台中的 git 文件移动到我们的工作区中，减少了在控制台中浏览 git 文件的心理负担。
Git History
Git History 是一个 VS Code 插件扩展，可让你轻松查看历史记录并搜索提交、消息、分支、文件和作者。除此之外，它还允许你通过几次简单的单击和命令来挑选提交、比较文件、软复位和硬复位、还原、合并和变基。
Code Time
你有没有想过你花了多长时间编码？尽管转向远程工作，我们仍然很容易被孩子、包裹递送甚至狗等生活琐事分心——就像我们坐在办公室里通过同事和临时会议一样。Code Time 通过跟踪你的时间让你对自己的工作效率负责，并可以帮助你细分你最常从事的项目。“进入流程模式”等功能可以帮助你保护你的时间并跟踪开发指标，以将你的编码指标视为统计趋势。
Polacode
想分享代码片段吗？想让它看起来专业吗？Polacode 是一个很酷的小插件，可让你获取代码的“宝丽来”，而无需使用剪切工具。你突出显示所需的代码，它会自动创建一个格式化的代码文件。
Docker Explorer
VSCode扩展排行榜：Docker 是一个绝妙的主意，但保持对所有镜像、集线器和注册表的管理可能很复杂。Docker Explorer 可以更轻松地直接连接到 Azure 容器注册表以进行实时管理。
Remote Development
所以你有一些代码。或者也许你有一个容器。远程开发让你可以连接、开发和部署环境。该插件由 Microsoft 开发和发布，处于活跃开发阶段，支持 WSL、SSH 和容器连接，用于远程应用程序开发。

常用的VSCode扩展有哪些：格式化和整理

Prettier
谁不喜欢漂亮的代码？Prettier 是你最流行的格式化和 linting 工具，可根据行业惯例对你的代码进行标准化。它还确保你的团队在外观上创建视觉上无缝的代码——因此不再争论应该使用多少选项卡或空格或括号应该放在什么位置。
Beautify
如果你想成为一个叛逆者，Beautify 是你的 Prettier 的替代品。拥有超过 700 万次安装，Beautify 是另一个可靠的代码“美化器”，它以最少的干预来整理和格式化你的代码。
TODO Highlight
最佳VSCode扩展合集：我们都有一份在代码中要做的事情的工作清单。我们也经常以评论的形式为自己和他人留下笔记。然而，评论经常淡出并消失在背景中。TODO Highlight 是一个 VS Code 插件，允许我们出于生产力原因利用代码中的注释。它通过突出显示代码注释并将它们与原始待办事项列表颜色配对来工作。
Better Comments
需要比 TODO Highlight 更强大的东西吗？Better Comments 允许你根据不同类型的注释突出显示你的评论，从而将其提升到一个新的水平。支持的类型是警报、查询、TODO 和突出显示。它也可以通过你可能需要的其他内容的注释样式进行扩展。
Excel 查看器
哪个VSCode扩展最好？如果你正在处理数据，你很有可能还会遇到某种形式的 Excel 电子表格。Excel 查看器通过将长字符串和逗号分隔的字符串格式化为表格格式，可以轻松地在 VS Code 编辑器中处理 Excel 数据。这可以为你的 .csv、.tsv 和 .tab 扩展名创造奇迹。
Markdownlint
在某种程度上，markdown 是新的 HTML。但是，当你的降价在某处遗漏 *、# 或空格时，处理起来可能很麻烦。markdownlint 处理编写 Markdown 时出现的格式不一致问题。如果你违反降价规则，它还可以通过提醒你来帮助你学习正确的降价。
ESLint
ESLint 是一种 JavaScript 代码 linter，用于查找和修复 JavaScript 代码中的问题。它有助于检测你的代码中可能存在的有问题的模式，并帮助你修复它们以避免不一致和错误。

VSCode扩展排行榜：调试

代码拼写检查器
我们都做过——我们都在某个地方打过错字，并花了宝贵的时间来寻找它们。Code Spell Checker 是一种方便且广泛使用的拼写检查，也适用于驼峰式代码。这个 VS Code 插件已帮助超过 300 万已安装用户在拼写错误在编码工作流程中出现问题之前捕获它们。
JavaScript 调试
器 Visual Studio Marketplace 中有几个 JavaScript 调试器。一个可靠的插件扩展是 JavaScript Debugger。这个基于 DAP 的 JavaScript 调试器可以使用终端中显示的进程来调试 Node.js。
Turbo Console Log
控制台日志可以成就或破坏你的工作效率。Turbo Console Log 是 VS Code 的一个活动插件，可让你选择调试主题的变量，并自动将日志消息添加到最近的相对行。这让你无需编写任何 console.log 代码即可快速调试。
Regex Previewer
表达式有时会令人困惑。这就是为什么 Regex Previewer 是用于 VS Code 设置的如此方便的扩展插件工具。它显示与并排窗口匹配的正则表达式，并根据你的正则表达式进行实时实时更新。
Import Cost
导入模块可能很昂贵。进口成本让你可以看到进口包裹的大小——通常是隐藏的，除非你去寻找它。这可以防止你开发运行成本高的代码，从而节省你现在和将来的时间。
Task Explorer
常用的VSCode扩展有哪些？npm、grunt、sass、yarn、docker 以及你需要运行的任何其他内容都可以通过任务资源管理器有效且高效地完成。这个 VS Code 插件通过运行任务的能力扩展了你的侧边栏和/或资源管理器。因此，现在无需离开 VS Code 工作区来完成工作。
Test Explorer UI
测试可以是一个手动过程，如果不是一个复杂的过程。TEST Explorer UI 是一个扩展，它为开发人员提供了一个 UI，用于在 Visual Studio Code 中运行他们的测试。这个插件扩展支持多种语言，包括 JavaScript、ABAP、C、C++、Exlir、Elm、Go、Haxe、Java、Python、Ruby、REST/GraphQL 和其他流行的语言和实现。

最佳VSCode扩展合集：特定语言

Python
VS Code 的 Python 插件提供了丰富的支持，包括 Pylance IntelliSense、linting、调试、代码导航、代码格式化、重构和变量浏览器。这个特殊的 Python 插件扩展还支持 Jupyter Notebook，并提供快速启动选项，使你的流程易于访问。
JavaScript 代码片段
哪个VSCode扩展最好？除了支持 JavaScript 之外，JavaScript 代码片段还支持 TypeScript、TypeScript React、Html 和 Vue 代码片段。所有片段都带有一个 final ; 带有非分号叉的分号可在此处获得。代码段包括类助手、方法和控制台方法，以加快编码速度。
Quokka.js
Quokka.js 是一个有趣的生产力工具，可让你借助运行时值快速创建 JavaScript/TypeScript 原型。那么Quokka究竟是做什么的呢？它会告诉你在编码时如何出错。它非常适合通过实时执行和结果进行学习和测试。
Docker
常用的VSCode扩展有哪些？安装量超过 1100 万，Docker 是 Visual Studio Code 上任何与 Docker 相关的插件扩展。此扩展可让你轻松构建、管理和部署容器化应用程序，并提供单击调试功能。你可以使用 Docker 轻松编辑和生成 docker 文件。
ES7、React、Redux 和 GraphQL 片段
JavaScript 无处不在，ES7、React、Redux 和 GraphQL Snippets 几乎涵盖了高效开始现代应用程序开发所需的一切。这个插件扩展是你可能已经在使用的任何其他基于 JavaScript 的代码片段的绝佳替代品。
Reactjs Code Snippets
最佳VSCode扩展合集：如果你正在处理 React 项目，Reactjs Code Snippets 可以通过提供整齐打包和预先编写的模板供你使用来帮助改善你的工作流程和代码速度。你所要做的就是开始输入触发器命令，你将获得有用的片段。
HTML CSS Support
什么是没有 HTML 和 CSS 的现代应用程序开发？HTML CSS 支持是 VS Code 中 HTML 和 CSS 的终极智能感知。功能包括 id 和 class 属性完成、链接和嵌入的样式表、继承和 CSS 选择器验证。