Visual Studio Code 扩展，不仅仅是“必须拥有前 10 名……”

众所周知，Visual Studio Code 已成为当今全球最受欢迎的代码编辑器之一（甚至可以说是最受欢迎的）。它无处不在，人们正在扩展它，几乎可以处理所有与文本相关的功能！首次启动时，它已经拥有强大的功能，但真正让它大展身手的是其出色的扩展系统。当然，扩展在代码编辑器领域并不是什么新鲜事，但我认为 VSCode 社区的发展速度是其他任何编辑器都无法比拟的。

然而，对于新手来说，在刚开始使用时，整理并了解哪些扩展对他们有帮助，可能会令人望而生畏或耗时。我记不清有多少人向我咨询过有用的扩展推荐。我总是截取我的扩展面板的屏幕截图，然后将其发送给推荐人，但这些建议只是冰山一角，因为我实际上只谈到了几个核心扩展。我尝试寻找一些关于推荐扩展的好帖子。有很多“前 10/20 名”的帖子，甚至还有一些“前 50 名”的帖子，但从未出现过一个能够构建一个有凝聚力的开发环境的综合列表。市面上总有老掉牙的Awesome VSCode列表，但这个列表并没有以连贯的方式介绍如何构建开发空间，更像是一份关于所有扩展的头脑风暴（它应该如此）。虽然这篇文章基本上也是我扩展的头脑风暴，但我试图对其进行一些额外的整理。

在这篇文章中，我们将深入介绍我安装过并经常使用的所有扩展程序，以及一些我感觉不错的扩展程序。在开始之前，先说几点：

首先，我并不总是启用所有这些功能，我只是安装了其中一些，以便在需要时可以快速访问它们。

VSCode 可以在全局、项目/工作区范围内启用/禁用扩展，这太棒了！这样，我们就可以只在处理 C++ 项目时激活那些 C++ 扩展，或者在笔记/写作工作区中只使用全部的Markdown 扩展。

其次，我绝不声称这些扩展程序是最好的（尽管你会看到很多你可能在那些“顶级扩展程序”帖子中见过的扩展程序）。其中一些扩展程序的安装量高达 500 万到 1000 万次，而其中一个扩展程序的安装量不到 200 次。这些只是我根据自己的经验发现非常有用且非常适合我工作流程的扩展程序。市面上有成千上万的扩展程序可供探索！如果你没有看到你喜欢的扩展程序，请告诉我！我很乐意去看看！正如你所见，我挺喜欢它们的。

好吧，让我们开始了解一些优秀的扩展！

• 首要的是
• 视觉的
• 语言和文件支持
• 代码导航
• VIM 仿真
• 代码质量
• 调试
• IntelliSense、自动完成和代码片段
• 文件管理和搜索工具
• JavaScript
• 实时分享
• 远程开发
• 代码执行
  • 有薪酬的
• Git
• Markdown
  • Matt Bierner 的扩展
• 使用图像和颜色
• 炫耀
• 其他实用程序
• 就是这样

首要的是

• 设置同步-（8 月 24 日更新 - 一些人在评论中提到 VSCode 现在原生支持此功能。是的，这是事实，但如果您继续阅读，您就会明白为什么我建议同时使用两者。） - 这是我在任何新 VSCode 实例上的第一次安装。为什么？因为您可能已经猜到了，这是一种使用 GitHub Gists 在机器之间同步 VSCode 设置的方法。为您提供一种简单的方法来存储和恢复所有 VSCode 设置（首选项、代码片段、键绑定和扩展设置），以便在您使用的任何机器上使用。您甚至可以通过公共 Gists 与其他人共享您的设置。能够在我的工作电脑上调整一些设置、上传它们，然后在我启动个人电脑时使用它们，真是太棒了。VSCode 团队还实现了其原生版本的同步设置，而且非常棒。它可以保存 UI 状态并允许时间旅行；然而，为了安全起见，我希望将我的信息存储在 1-2 个以上的地方，所以这个会保留下来。

视觉的

是时候让编辑器看起来漂亮（并且也很有帮助）了！

• Night Owl - VSCode 自带了一些很棒的内置主题，但它成为社区中最受欢迎的主题之一并非偶然。Sarah Drasner是一位非常优秀的人，她创建了这个高度易用的主题，即使在夜间/弱光环境下也能轻松阅读，尤其适合色盲人士。在我使用 VSCode 的三年里，我尝试过很多主题，但自从它发布以来，我一直选择使用这个主题。它还有一个很棒的浅色主题，我经常在白天使用它，并尽量让我的屏幕与周围的光线保持一致。
  • Andromeda - 另一个我喜欢的主题。它的对比度稍高一些，文字颜色也更暗一些，但我仍然会继续使用 Night Owl。
  • 如果您有来自其他编辑器的喜欢的主题，我建议您搜索它，因为可能有一个适用于 VSCode 的版本！
  • 如果这些不适合您，我建议您查看最佳 VSCode 主题：2020 年 50 个 VS Code 主题
• iTerm 主题同步- 自动将您的 VSCode 主题同步到 iTerm！?? 它相对较新，于 2020 年 6 月发布，但我仍然不敢相信截至撰写本文时，它的安装量还不到 200 次！
• Material Icon 主题- 我们为您的编辑器添加了多种亮眼的配色，让您的文件树拥有更清晰的视觉效果。这时图标主题就派上用场了，其中我最喜欢的是 Material Icons。几乎所有类型的文件都有相应的图标，并且都带有颜色，甚至还有一些文件夹图标。这样一来，您可以轻松浏览文件树，准确查看文件的格式或文件夹中包含的文件类型。
  • VSCode 图标- 在撰写本文时是市场上最受欢迎的图标，因此这也是您可以查看的另一个不错的选择。
• Peacock - 好了，回到另一个视觉扩展。Peacock 可以轻松区分每个窗口中打开的项目。它为每个项目存储了活动栏、标题栏、状态栏和边框的颜色主题。这使得在打开的项目之间切换变得非常容易，并且只需通过配色方案就能知道您正在查看哪个项目。
• Bracket Pair Colorizer 2 - 为匹配的括号 ( (){}[]) 着色，使其更容易进行视觉匹配。您可以设置自定义颜色，它还提供几种不同的模式来轮换颜色。此外，它还提供在间距或标尺中显示括号的选项。如果您还没有意识到这一点，我很喜欢通过视觉提示来了解代码的进展。注意：这是此扩展程序的第二个版本，请确保您下载的是这个版本，而不是原版，因为原版已不再维护。
• 高亮匹配标签- 高亮 HTML 和 JSX 中匹配的开始和结束标签，并可将树状结构中的路径添加到状态栏。默认为黄色下划线，但提供多种自定义选项。
• 颜色突出显示- 以其代表的颜色突出显示颜色值。
• 缩进彩虹- 为代码左侧的缩进添加颜色。通过设置，您可以调整用于缩进深度的颜色数组。我为此使用了非常柔和的灰色：

  "indentRainbow.colors": [
    "rgba(50,50,50,0.05)",
    "rgba(50,50,50,0.1)",
    "rgba(50,50,50,0.15)",
    "rgba(50,50,50,0.2)",
    "rgba(50,50,50,0.25)",
    "rgba(50,50,50,0.3)",
    "rgba(50,50,50,0.35)",
    "rgba(50,50,50,0.4)",
    "rgba(50,50,50,0.45)",
    "rgba(50,50,50,0.5)",
    "rgba(50,50,50,0.55)",
    "rgba(50,50,50,0.6)",
    "rgba(50,50,50,0.65)",
    "rgba(50,50,50,0.7)",
    "rgba(50,50,50,0.75)",
    "rgba(50,50,50,0.8)",
    "rgba(50,50,50,0.85)",
    "rgba(50,50,50,0.9)",
    "rgba(50,50,50,0.95)",
    "rgba(50,50,50,1.0)"
  ],
  "indentRainbow.errorColor": "rgba(128,32,32, .6)",

• 图像预览- 在文件页边距中显示链接图像的缩略图。此功能有助于快速确认您使用的图像是否正确。
• 输出着色器- 为输出/调试/扩展面板和*.log文件添加语法突出显示。
• 更佳评论- 帮助将评论分类为“提醒”、“查询”、“待办事项”、“高亮”以及其他可自定义的标签。使用这些标签，您可以设置文本效果（颜色、背景色、删除线、下划线、粗体、斜体）来突出显示这些评论块。
• 高亮线- 我一直在反复琢磨这个功能。它的概念很简单：它会在编辑器中为光标所在的行添加下划线，使其更加醒目，更容易找到。关键在于找到与主题相符的颜色和透明度。我喜欢这个功能，但有时它会让人分心。
• 缩进块高亮- 这也是我反复研究过的一个功能，概念也很简单。它会用背景高亮光标当前的块范围。同样，找到合适的颜色和不透明度是这个功能的关键。

还有一点要补充，如果你还没有一款漂亮的编码字体，那也很重要。我强烈建议你从Nerd Font下载一个，因为他们会为你的终端提供大量的图标。我个人最喜欢的是 Victor Mono！

好了，一切看起来都很好。现在，让我们来看看一些额外的功能。

语言和文件支持

VSCode 提供丰富的扩展程序支持多种语言。我这里只列出我目前已安装的扩展程序，因为我只保留了我常用的语言的扩展程序。

• Python
• C/C++
• YAML
• XML 工具
• lit-html - JavaScript 和 TypeScript 标记模板字符串中的 html 语法突出显示和 IntelliSense。
• Docker - 从 VSCode 内部创建、管理、部署和调试 Docker 容器。
• Kubernetes - 类似于 Docker 扩展，但适用于 Kubernetes。您可以在编辑器中开发、部署和调试表单。
• Arduino - 如果你做过 Arduino 编程，你肯定知道他们的代码编辑器太烂了……这个扩展新增了从 VSCode 直接烧写 Arduino 设备的支持。真是太棒了。
• DotENV - 文件语法高亮显示.env. 这是从流行的同名 SublimeText 包移植而来的.
• MDX
• EditorConfig for VSCode -.editorconfig是一个可以包含在你的代码库中的配置文件，用于弥合不同编辑器之间编辑器设置的差异。如果你使用任何使用此配置文件的代码库，则可以使用此安装包来处理这些文件。
• Sass/Less/Scss/Typescript/Javascript/Jade/Pug Compile Hero Pro - 它为您提供了一个不错的选项，可以“保存时编译”HTML/CSS/JS 等多种超集语言。使用 Compile Hero Pro，您可以使用这些格式进行编写，而无需进行常规编译器所需的所有设置。非常适合用于原型设计。

代码导航

• Code Ace Jumper - Ace Jump 的 VSCode 实现。我最近在John Lindquist的推荐下看到了这个工具，他为 JetBrains 系列编辑器构建了最初的 Ace Jumper。我还在适应它的过程中，但它是一个非常棒的概念，我已经看到了它的好处！
• 书签- 在代码中创建、命名和浏览书签。此扩展程序将在页边距中添加图标，并在侧面板中显示文件或整个项目中的书签。
• TabOut - 这是我在写这篇文章时发现的，它解决了我一段时间以来的一个烦恼。它的概念很简单；因为 VSCode 默认会自动添加右括号/圆括号/引号，所以你总是需要在最后想办法把它去掉，对吧？当然……我可以直接按向右箭头（或者l对于 VIM 用户来说），但 TabOut 让我可以用tab键盘快捷键，这样看起来更自然，也不需要太多的手指移动。我安装它才两天，所以我们看看它是否还能用，不过现在它已经存在了。

VIM 仿真

免责声明：我并非 VIM 的狂热用户，但尝试过几次，也和许多 VIM 爱好者交流过。我之所以写这篇文章，是因为这些人推荐了这些 VIM。

• vscodevim.vim - VSCode 最流行的 VIM 模拟器。
• amVim - 这是我从那些对顶级安装的 vscodevim.vim 不满意的人那里听到的下一个好评。
• Neo Vim——这个使用 Neovim 的完整嵌入式实例作为 VSCode 编辑的后端。

代码质量

• ESLint - 使用最流行的 linting 包进行 Linting。
• TSLint - 专为打字员打造！
• LintLens - 无需再查找 ESLint 规则。获取配置中每条规则（包括插件）的内联注释！
• Prettier - 固执己见的代码格式化程序，你要么喜欢它（就像我一样），要么讨厌它。
• Stylelint - 让我们用 CSS/SCSS/Less 来完善衬垫！
• 代码拼写检查器- 非常不错的代码拼写检查器。它允许你创建全局和每个工作区配置的自定义词典。
• 格式切换- 快速开启/关闭自动格式化功能，无需进入设置。如果您不想让编辑器在保存时自动格式化代码，可以使用此功能。

调试

• Turbo Console Log - 这也许是我用过最频繁的扩展了。我们花了很多时间调试代码，虽然很多人有自己的方法，但我还是喜欢我那好用的console.log。我还会在另一个帖子里分享一个独特的日志记录代码片段，但我使用这个扩展的热键远不止这些。它有四个热键，用于处理console.log我工作中不可或缺的语句。
  • ctrl+option+L：选择一个或多个变量，然后按此热键console.log在每个变量的下一行构建一个，其中包含自定义前缀、父作用域、变量名称和值。前缀是TCL:默认的，但您可以在设置中将其设置为任何您想要的。我的设置为????>>>>>>>。您还可以将其设置为将日志包装在其他两个日志中，这样可以通过将其与其他内容区分开来提高可读性，从而帮助您在控制台中识别它。
  • option+shift+c：从当前文档中注释掉console.log扩展插入的所有语句。
  • option+shift+uconsole.log：取消注释当前文档中扩展插入的所有语句。
  • option+shift+dconsole.log：从当前文档中删除扩展插入的所有语句。
• 错误镜头- (8 月 24 日从评论中添加) - 这篇文章发布后，很多人推荐了这个功能。我刚刚试用了一下，它绝对会继续使用！它会高亮显示警告和错误行，内嵌诊断文本，在页边距显示图标，并在状态栏显示消息。
• Chrome / Firefox / Edge调试器- VSCode 内置了强大的 JavaScript 调试器。这两个扩展程序允许您使用该调试器针对相应的浏览器进行调试。您可以在浏览器中运行代码、设置断点、监视变量，以及在 VSCode 调试器中查看调用堆栈。将其与 Turbo Console Log 结合使用，您将立即获得一些出色的调试工具！
• 适用于 VSCode 的 Microsoft Edge (Chromium) 工具- 现在我们在微软的浏览器中使用了微软的编辑器，所以你知道肯定还有什么额外功能。有了它，你可以在 VSCode 编辑器中查看浏览器元素、网络工具，甚至可以直接截屏浏览器！说实话，大约六周前，我完全切换到了 Chromium Edge 作为我的日常浏览器，我一点也不后悔……我从没想过我会这么说。

IntelliSense、自动完成和代码片段

• Emojisense - 表情符号自动补全，我还需要多说吗？你知道你的代码需要更多表情符号吗？
• Visual Studio IntelliCode - 微软为 Python、TypeScript/JavaScript 和 Java 提供的 AI 辅助智能感知。它会在您编码时根据代码上下文显示推荐的补全项。
• HTML 中 CSS 类名的 IntelliSense<link> - 针对工作区中的 CSS 类名的 IntelliSense，甚至包括通过标签引入的外部样式表！
• npm IntelliSense - 在导入语句中为您的 npm 模块提供 Intellisense。
• 路径智能感知- 文件名智能感知
• 自动重命名标签-（8 月 24 日更新 - 评论里有人告诉我，VSCode 现在原生支持这个功能，无需这个扩展！感谢@robole！）- 当你重命名一个 HTML/JSX/XML 标签时，这个扩展会帮你重命名另一个。简单、高效，太实用了。
• ES7 React/Redux/GraphQL/React-Native 代码片段- 适用于众多 FE 库的精彩代码片段。它甚至包含完整的文件模板代码片段！
• Cypress Snippets - 您是否编写过很多 Cypress 集成/端到端测试？那么您需要这个扩展。如果没有，您需要开始，这意味着您也需要这个扩展。

我总是建议你寻找你最喜欢的库的扩展（市面上有很多），或者自己开发一个！我计划的其中一篇文章就是关于这个的。敬请期待即将发布的文章（完成后我会在这里添加链接）。

文件管理和搜索工具

• Advanced-New-File - 你是不是讨厌把手从键盘上拿开？我也是……没错，用 新建文件很容易cmd + n，但保存文件时，不用鼠标就很难把它保存到你想要的位置。为什么不一开始就在正确的地方创建它呢？这就是这个工具的用武之地。你可以从命令面板激活，或者像我一样，cmd + n用这个快捷键替换掉它！激活后，你只需选择文件夹，然后输入你想要的文件名和扩展名，就可以了。小菜一碟……
• File Utils - 这会将文件管理命令添加到命令面板，例如重命名、移动、复制、删除、复制活动文件的名称，以及在不同目录中添加新文件的几个命令（尽管我建议为此使用 Advanced New File）
• Folderize - 使用此扩展程序，您可以将一个文件转换为包含该文件的目录、index.js导出该文件的文件，以及可选的测试文件和 CSS 模块文件。我过去在修改文件夹结构时，曾在几个项目中使用过 Folderize。我通常会在需要之前将其禁用或卸载，但当我需要它时，知道它的存在就好了。
• 搜索 node_modules - 是否需要引用某个安装包内的代码？这个扩展可以帮你搞定。VSCode 的内置搜索功能没有包含代码是node_modules有原因的，所以不用管它，直接用它来快速查找已安装的包。

JavaScript

• 导入成本- 在任何导入的包旁边添加一个注释，指示导入代码时会添加到 bundle 中的代码量。它利用 Webpack 计算成本，虽然精度并非 100%，但大致可以估算出何时需要猜测某个新 JS 包的加载速度。
• JS 重构- 重构 JS 代码时的一些实用命令。以下是我常用的一些命令：
  • 提取方法
  • 提取变量
  • 转换为箭头函数
  • 转换为函数声明
  • 转换为模板文字
• JSON 到 JS 对象- 选择一些 JSON，激活，现在您有一个 JS 对象！
• JSON 到 TS - 选择一些 JSON，激活，现在您就有了 TypeScript 类型！
• 将 JSON 粘贴为代码- 另一个 JSON 操作扩展，但比上一个更进一步。在这里，您不仅可以获得匹配的 TypeScript interface，还可以选择以下选项：
  • 推断地图
  • 推断枚举
  • 推断日期时间
  • 阴冷流体
  • 推断布尔字符串
  • 推断整数字符串
• AWS Toolkit - 这对我来说是一个新工具，因为我最近才开始接触 AWS 的内部组件，因为我现在在 AWS 工作。这个工具包添加了一个侧面板，其中包含各种 AWS 工具。它可以访问 Lambdas 和 CloudFormation 等服务、一个 CDK（云开发工具包）资源管理器，以及命令面板中的许多 AWS 命令​​。我仍在完善这个工具包的工作流程，但下周我会用到很多 CDK 相关的工具，所以也许很快你就会收到我的更多消息。
• Jira 和 Bitbucket（官方） ——这是我唯一想再次与 Jira 交互的方式。我不喜欢他们的界面，但就是这样。有了这个扩展，你可以查看任何工单、创建新工单等等，无需浏览器。它的工作流程感觉更像是为开发者打造的，而不是网页界面，很可能就是因为它本身就是。诚然，我从未使用过 Bitbucket 的功能，但如果它与 Jira 集成类似，那它可能相当不错。我现在不再使用 Jira 了，但如果你在使用 Jira 的地方工作，我强烈建议你看看这个。

实时分享

Visual Studio Code 的 Live Share 功能自发布以来就令人印象深刻，尤其是在如今疫情肆虐、大多数科技公司居家办公的当下，它更是成为了最佳的结对编程工具之一。通过它，您可以让多人同时编写代码。您可以共享项目、共同编辑、共同调试、共享服务器以及共享终端！它还包含语音通话和会话聊天功能。您可以使用它向团队的新开发人员展示您的代码库，进行远程技术面试，向团队展示新功能等等！

官方文档在这里

注意：我强烈建议您仔细查看邀请和加入访问文档，以防止不受欢迎的访客进入您的会话。您还可以查看我下面提到的 Live Share Gatekeeper 扩展程序。

• Live Share 扩展包- 包含以下扩展的扩展包：
  • Live Share - 主要扩展
  • Live Share Audio - 为 Live Share 会话添加音频通话功能
• 实时共享门禁- 如果您正在召开有关专有代码库的会议，您的公司很可能不希望任何人都能加入。门禁会将实时共享会话锁定给共享同一域/AAD 租户的人员。即使外部人员以某种方式获取了您的会话 URL，也能有效地阻止他们加入您的会话。您可以设置允许的域列表，其他所有域都会被阻止。

远程开发

现在您已经拥有了出色的 VSCode 设置，但随后您必须远程登录到服务器或容器才能完成工作。又或许，您的公司所有工作都在已部署的服务器上完成（谷歌、Facebook、亚马逊做了很多这样的工作）。好吧……该死，那里没有 GUI，您无法将 VSCode 安装到命令行上。我猜它又回到了 vim 或 emacs 时代，对吧？............... 再也不会了！这已经成为我在 VSCode 中最喜欢的功能之一。借助以下扩展，您可以使用 VSCode 在容器、远程服务器或 Windows 子系统 Linux 内进行远程开发，而无需在您的计算机上保存源代码！我在亚马逊工作时，有一个远程服务器用于开发工作，我使用它通过 SSH 连接到该服务器，并使用 VSCode 的所有功能来处理我团队的代码。这有效地减轻了我电脑上的所有计算压力，同时也保证了我们的代码更安全。到目前为止，这是一次非常棒的体验！Facebook 也全力投入其中，这意味着他们也在与微软合作，以使其成为一种出色的体验。

官方文档在这里

• 远程开发- 这是主要的扩展包。它包含以下三个扩展：
  • 远程 - SSH
  • 远程容器
  • 远程 - WSL

代码执行

• 代码运行器- 就让这个从它的描述中说明一切，但 TL:DR 是“运行多种语言的代码。” > 运行多种语言的代码片段或代码文件：C、C++、Java、JavaScript、PHP、Python、Perl、Perl 6、Ruby、Go、Lua、Groovy、PowerShell、BAT/CMD、BASH/SH、F# Script、F# (.NET Core)、C# Script、C# (.NET Core)、VBScript、TypeScript、CoffeeScript、Scala、Swift、Julia、Crystal、OCaml Script、R、AppleScript、Elixir、Visual Basic .NET、Clojure、Haxe、Objective-C、Rust、Racket、Scheme、AutoHotkey、AutoIt、Kotlin、Dart、Free Pascal、Haskell、Nim、D、Lisp、Kit、V、SCSS、Sass、CUDA、Less 和自定义命令。
• Jest - 这是一款在后台运行测试并提供实时反馈的插件。它本身就很不错，但我更喜欢Wallaby，它是这个扩展的灵感来源，功能更全面，但也需要付费（后面会详细介绍！）。这个扩展还为快照文件添加了语法高亮功能。

有薪酬的

我知道，我知道，付费续费？！不过，说真的，听我说完。这些续费帮我节省了好几倍的时间，物超所值！这两款产品都是同一家公司生产的，而且非常棒。第一年之后，续费还能享受大幅折扣。

• Wallaby - https://wallabyjs.com/ - 第一年个人用户 120 美元/公司用户 240 美元，续费可享折扣（详情见下文）- Wallaby 是一款出色的测试扩展程序。它会在后台持续运行测试，并在您在代码旁边的空白处输入（测试或正在测试的代码）时立即提供反馈！如果您实践 TDD，这几乎是必备工具。它还添加了：
  • 时间旅行调试
  • 内联运行时值（查看代码测试的结果）
  • 内联错误报告
  • 内联代码覆盖率
  • 带有测试和覆盖率浏览器的托管 Web 应用程序
  • 交互式测试输出
  • 运行时值浏览器，以及更好的差异和快照。
• 短尾矮袋鼠-https://quokkajs.com/ - 社区版免费，专业版个人每年 50 美元/公司每年 100 美元，续订可享受折扣（详情见下文）- Wallaby 专注于测试，而 Quokka 则是代码的实时暂存器。免费社区版的运行时值会与代码内联显示，并提供基础值浏览器、代码覆盖率、实时日志记录/比较以及实时共享集成。专业版则添加了实时值显示、更广泛的值浏览器、实时注释、项目文件、导入快速包安装、性能测试以及仅在保存时或单次运行的功能。Quokka 是一款出色的原型设计工具，我在教别人编程时经常使用它。

您还可以将两者捆绑在一起，个人首年价格为 150 美元。Wallaby 续费折扣为 50%，Quokka 续费折扣为 30%，我认为捆绑包的折扣在 40% 左右（我去年支付了 89 美元 + 税）。

如果您的公司支付的话，当然会更多，但是您的公司正在支付，所以没什么大不了的，对吗？

Git

• 本地历史记录- 好吧，这其实和 Git 没什么关系，但它是每次修改文件时都会进行本地版本控制。你有没有过这样的经历：希望能够回到一个小时前你突然想到但没提交，最后却彻底失败的想法？没错，这个扩展帮了你大忙！它真的救了我好多次。它是那种你觉得可能用不上的扩展，直到你需要它，然后还在后悔自己没安装它。一定要把它添加.history到你的.gitignore，最好是全局的。
• GitHub Pull 请求和问题- 连接 GitHub，让您无需打开浏览器即可直接在 VSCode 中审核 PR！是不是很棒？！您可以直接在编辑器中创建 PR、查看所有活跃 PR、查看分配给您的 PR、评论、审核 PR、查看 PR 分支进行测试、批准、合并和关闭 PR！您还可以享受编辑器的所有功能，包括代码高亮、搜索、VSCode 的所有强大功能以及您正在安装的其他强大扩展！我一直用它来审核 PR，它是我的最爱之一。
• VSCode 常规提交- 如果您使用常规提交，那么这个扩展非常适合您。它允许您在编辑器中使用与命令行界面上的 Commitizen 工具相同的提示符（除了它还添加了 Gitmoji 功能！）。市面上也有一个 Commitizen 扩展，但它没有 Gitmoji，所以……我现在用这个。
• 在 GitHub、Bitbucket、Gitlab、VisualStudio.com 中打开！ - 转到项目中的一行并激活此功能，以便直接导航到 GitHub 中的代码行或将链接复制到剪贴板以发布给队友。
• GitLens - VSCode 中查看 Git 历史记录最强大的扩展程序。它最初主要是一个带有 Git Blame 注释的扩展程序，但后来增加了更多功能！我已经用了三年，但还没有真正充分发挥这个扩展程序的威力。以下是它的部分功能 列表。
  • 当前线路故障
  • 代码块责任 - 有多少作者编辑了该块
  • 状态栏怪
  • 悬停
  • 责备
  • 细节
  • 变化
  • 注释
  • 侧边栏视图
  • 存储库信息
  • 文件历史记录
  • 线路历史记录
  • 提交比较
  • 提交搜索
  • 下水道责怪
  • 装订线热图
  • 最近更改注释
  • 还有更多！

Markdown

好吧，我不得不给 Markdown 一个单独的章节，因为我有很多 Markdown 相关的工作要做。事实上，我正在用 Markdown，在 VSCode 中，使用这些扩展来编写这篇文章。我所有的写作、笔记以及我的个人网站/博客/数字花园开发（目前正在开发中，发布后我会在这里添加链接）都使用 VSCode 和 Markdown。通过扩展，VSCode 成为了一个非常强大的环境，可以完成所有这些工作。你可以获得 VSCode 本身的所有文本编辑功能，并且可以通过扩展定制你自己的写作体验，让它成为你想要的任何风格。这里有很多功能可以实现，让我们深入探讨一下。

• Foam - 诸如网络思维、第二大脑和Zettelkasten之类的笔记记录概念如今风靡一时。或许你听说过Roam这种笔记记录工具。Foam 的灵感源自 Roam，它内置于 VSCode 中，使用存储在你电脑上的 Markdown 文件，而不是存储在你无法控制的云端。它由Jani Eväkallio创建，是一个快速发展的系统，它将不同的 Markdown 扩展与一些额外的功能交织在一起，为你提供一个卓越的网络思维笔记环境。
• Markdown All in One - 如果你打算使用任何 Markdown 扩展，至少要有这个。顾名思义，它是一个集所有功能于一身的扩展。此扩展添加了用于创建/更新目录、列表编辑、表格格式化、打印为 HTML、数学运算、自动完成等功能的键盘快捷键。
• Markdown Notes - 主要用于我的所有笔记，这增加了使用 Markdown 中的 [[wiki-links]]、反向链接和 #tags 进行快速导航的能力。
• Markdown 链接- 另一个主要用于 Foam 和我的笔记。它会收集所有本地 Markdown 文件之间的链接，并创建一个图表来展示它们是如何相互链接的。
• MarkdownLint - Markdown 的 Linting？没错！它有一套相当全面的规则，你可以在偏好设置中根据自己的喜好进行配置。
• Markdown 的 LaTeX Math - 说实话，我不使用它，但我似乎认识很多人使用它，所以我想将它包括在这里。
• Grammarly（非官方） ——VSCode 里的 Grammarly？！没错！我写这篇文章的时候发现了它，效果还不错！
• Markdown 图像- 将图像直接粘贴到您的 Markdown 文件中，它将生成 Markdown 代码并将图像保存到本地文件夹（默认）或 Imgur 等托管服务。
• Markdown PDF - 将您漂亮的 Markdown 文件转换为 PDF。
• 字数统计- 编辑 Markdown 文件时，在状态栏添加字数统计。我所有的写作都使用 Markdown 文件，我挑战自己每天写 1000 字以上，所以这个功能可以帮助我记录。
• Liquid - Liquid 模板语言的语法高亮。我把它放在这里而不是语言部分，因为我只在 Markdown 中使用它们。Dev.to 的许多功能都使用了 Liquid 标签，所以当我在 VSCode 中使用这些标签编写代码时，在编辑器中看到一些语法高亮显示真是太好了。
• MDC 预览- MDX 的预览面板！

Matt Bierner 的扩展

如果要推荐大家关注Matt Bierner来了解更多 VSCode 知识，那一定是他。他其实是 VSCode 开发团队的成员，所以对 VSCode 相当了解。他不仅开发了很棒的扩展，还每天都会在 Twitter 上发布 VSCode 使用技巧，而且刚刚在 YouTube 上推出了一个 Code 0 到 20 的视频系列！所以，让我们来了解一下他的扩展吧，它们都非常棒！

• markdown-link-expander - 让我们从我最喜欢的一个开始。突出显示一个链接，激活此插件，然后从链接页面抓取标题并生成填充好的 Markdown 链接标签！
• Markdown Table Prettifier - 简单的表格格式化
• Markdown 快捷键- 常用 Markdown 命令的键盘快捷键。列表比 Markdown All in One 的更详尽一些。
• GitHub Markdown Preview - 扩展包使 Markdown 预览窗口看起来像 Github 上的窗口
  • Markdown Preview GitHub Styling - 预览窗口的核心样式，与 Github 保持一致。注意：使用此扩展程序，即使您整体设置了深色主题，Markdown 预览也会显示白色主题。
  • Markdown 表情符号- MOAR 表情符号！！！ ???????
  • Markdown 复选框- 在预览窗口添加复选框/任务列表支持。非常适合在笔记中创建待办事项列表！
  • Markdown YAML 序言- 如果您在 Markdown 中使用 YAML 前置样式标题，这将把它呈现为预览窗口顶部的表格。
• Markdown 预览 Mermaid 支持- Mermaid 是一个用于制作图表和流程图的库。此扩展在预览窗口中添加了对 Mermaid 的支持！
• Markdown 脚注- 预览版支持脚注语法
• Markdown 图像大小- 能够在 Markdown 中为图像标签添加大小并在预览中呈现匹配。
• JSDoc Markdown 高亮- Markdown 语法高亮到 JSDoc 注释
• Gif 播放器- 在编辑器中播放/暂停/擦洗动画 gif！

使用图像和颜色

• SVG - 这个比简单的查看器稍微复杂一些。这是一个自称 SVG 语言扩展的插件。它添加了自动完成功能、文档符号树、实时预览、PNG 导出、MDN 参考、颜色选择器以及用于代码格式化和压缩的 SVGO 集成。它是一个真正深入研究 SVG 的工具箱。
• Draw.io 集成- Draw.io 已非官方集成至 VSCode。这将整个 Draw.io 编辑器直接集成到您的代码编辑器中！
• 颜色信息

炫耀

• CodeTour - Code Tour 是一款非常出色的扩展程序，它的功能非常独特。它允许您通过记录用户可以遵循的步骤，在 VSCode 内部创建代码库导览。它可以导航文件、调用 Shell 命令、运行任务、导出针对不同情况的不同导览，甚至还为您的导览提供自己的版本控制！CodeTour 是极致的入门文档扩展程序之一，但它也适用于任何您想向某人展示一些代码片段，但无法亲自操作的情况。
• CodeRoad - https://coderoad.github.io/ - 好吧，这是我在写这篇文章时偶然发现的另一个独特的工具。它很像 CodeTour，但不同之处在于 CodeRoad 更适合制作交互式教程。说实话，我还没试过这个，但它看起来很有前景，我迫不及待地想深入研究一下！
• Carbon-now-sh - 您是否经常截取代码截图？您是否会使用 Carbon 来美化这些截图？这款插件可以帮助您轻松实现这一点。高亮显示您想要的代码，激活扩展程序，然后跳转到已输入代码的 carbon.now.sh 页面。调整样式，导出，就大功告成了。

其他实用程序

• 实时服务器- 如果您在许多静态网站上工作，这是一个很棒的小扩展，它可以启动一个快速服务器，以便您将这些文件提供给浏览器。
• REST 客户端- 您喜欢 Postman，但又不太会用它的所有花哨功能？这是一款可以替代您电脑上其他应用程序的扩展程序（清理内存，是不是很棒？）。它没有Postman 那样花哨的功能，但别被它迷惑，它的功能非常强大。它可以发送 HTTP 请求、GraphQL 查询、带有请求历史记录的 cURL 命令、身份验证支持、环境变量支持、Cookie 支持等等。

就是这样

好了！就这样！一个长长的扩展列表，以及一些简短的介绍！希望你能从中找到一些你喜欢并且能用上的！正如我之前所说，如果你发现某个扩展对你的工作很有帮助，请留言告诉我！我很想尝试一下，即使它不适合我，但也许对其他正在阅读这篇文章的人来说，它就很合适了！

在本系列的后续文章中，我将逐一介绍这些扩展，并深入剖析如何优化 VSCode 的使用体验。我们将深入讲解如何设置和使用它们，以便您更好地了解我在开发应用程序时所依赖的工作流程。