编辑器扩展_15个有用的vscode扩展，可改善工作流程

自从推出以来，Visual Studio Code已迅速成为使用最广泛的轻量级文本编辑器之一。 尽管它是轻量级的编辑器，但由于其庞大的扩展库，它具有成熟的IDE的潜力。

这些扩展使VS Code成为社区中最受欢迎和易于使用的文本编辑器之一。

在这里，您将找到VS Code有用扩展的列表，这些扩展既具有功能优势，又为您的工作区增加了视觉效果。

1. Material Theme

此扩展为VS Code安装了不同的主题，使您可以根据自己的喜好自定义整个编辑器的外观。

您可以通过使用左下角的“设置”图标并单击“颜色主题”来开始使用可用的不同主题。

您可以使用向上和向下箭头键查看每个主题的预览，选择应用当前选定的主题后可以按Enter。

2. Material Icon Theme

此扩展程序安装了不同的图标，使您可以以清晰的外观查看目录和各种文件类型的图标。 您可以看到一些图标的示例，用于不同类型的文件和目录，如下所示。

安装扩展程序后，显示的图标中的更改将立即生效。

3. Prettier

此扩展可帮助您以简洁明了的方式格式化代码，并且支持多种技术和编程语言。

您可以使用以下两种方式之一格式化代码：

• 通过手动选择文件的所有内容，然后按Option / Ctrl + Shift + F键。 如果提示您选择默认格式化程序，请从下拉列表中选择更漂亮。
• 自动保存文件的内容时，对于此选项，您需要进行一些小的配置更改，方法是转到左下角并单击齿轮图标，然后单击设置。

搜索“保存时格式化”并启用该功能，如下所示。

一旦选中此选项，则每当保存任何更改时，文件的内容都会自动格式化。

4. Bracket Pair Colorizer 2

此扩展将为每组括号分配不同的颜色，以跟踪语句，代码块或函数的开始和结束。 它还用相同的颜色线将整个块包围在一组括号内。 每当将光标放在该代码块中时，该行就会在代码的左侧可见，如下所示。

安装扩展程序后，您将能够直接看到更改生效。

5. Live Server

此扩展在Web开发中非常方便。 每当您使用HTML，CSS和JavaScript文件时，此扩展名都可以让您查看最新保存的更改在网页中生效，而无需每次都刷新浏览器。

当您要开始使用此扩展程序时，请打开HTML文件，然后单击右下角的“上线”选项。

它将打开并打开新的浏览器窗口，并注意对相关文件所做的任何代码更改。

6. Code Runner

每当您需要运行以任何一种流行编程语言编写的小程序或代码片段时，此扩展名都会很有用。

当您要运行程序时，右键单击文件上的任意位置以查看选项“运行代码”。 单击它后，程序将运行，结果将显示在编辑器底部的“输出”选项卡中。

7. Better Comments

此扩展使用户可以以一种人性化的方式编写评论。 根据扩展名，注释的不同类别为：

• 强调 （*）
• 问题/查询（？）
• 待办事项（TODO）
• 警告（！）
• 参数（@param）
• 代码语句的样式也可以明确表示代码不应存在（//）

分类评论的样本如下所示。

用户还可以在设置中添加新的注释样式。

8. Auto Rename Tags

当您使用HTML / XML文件时，此扩展名将在您重命名了开始标记后自动重命名了结束标记。

如果您忘记更改结束标记的名称或结束标记远低于页面上的开始标记，则此扩展名将很有用。

安装扩展程序后，即可使用此功能。

9. Quokka.js

此扩展是JS和TypeScript的生产力工具。 通过使用此扩展，您可以在代码旁边即时查看程序的运行时输出。

您可以通过单击cmd / ctrl + shift + P键，然后在命令面板中搜索Quokka.js来开始使用此功能。 现在，您将能够在下拉菜单中查看所有可用命令的列表。

一旦开始在现有文件或新文件上运行quokka.js，运行时输出值将显示在编辑器中，如下所示。

10. CSS Peek

此扩展名使用户可以从HTML文件本身查看为特定HTML元素的ID /类标识符编写的CSS规则。 此扩展程序可以帮助您完成三件事：

• peek：您可以通过按住cmd / ctr并将鼠标悬停在标识符上来窥视为该标识符编写的CSS规则
• 内联编辑：您还可以使用cmd / ctrl + shift + F12键在HTML文件中即时编辑CSS规则
• 转至：您可以使用F12键直接转到CSS文件中该标识符的特定CSS规则集

11. Remote SSH

您可以使用此扩展从VS Code连接到远程服务器，并在编辑器中将其作为工作区打开。

它对于开发以及对服务器上的任何问题进行故障排除非常有用。 直接连接到服务器后，可以在编辑器中的相同环境和操作系统上进行开发和部署。

12. CodeSnap

此扩展使您可以快速简单地捕获代码快照。 它易于使用，您还可以通过转到“设置”并在其下搜索Codesnap来自定义代码捕捉的样式。

现在，每当您要为代码快照时，请在编辑器中的任意位置单击鼠标右键，您将能够在底部看到CodeSnap选项。 单击它之后，您将能够在单独的标签中看到打开的代码捕捉预览，如下所示。

现在，您可以选择完整的文件内容或其中的一部分作为快照的一部分。 选择内容后，单击预览下方的捕获按钮以保存代码捕捉。

13. Markdown All in One

通过此扩展功能，您可以通过提供许多有用的功能来轻松编写降价促销。 您可以使用以下键盘快捷键来快速编辑内容。

该扩展还支持自动完成，Github风格的markdown，Math表达式。

它还允许您预览最终输出，还可以将markdown打印为HTML。

有关扩展支持的所有功能的详细信息，请参阅此处的完整文档。

Markdown All in One - Visual Studio Marketplace​marketplace.visualstudio.com

14. Bookmarks

此扩展允许您在工作区中不同文件的特定行中将书签添加到代码中。

您还可以添加，删除和在不同的书签之间切换。 您可以通过右键单击代码中的任意位置，然后选择以下选项之一来执行此操作。

单击左侧面板中的“书签”选项卡后，您还可以将所有书签显示为列表，也可以从此处在每个书签之间进行切换。

15. Code Spell Checker

此扩展名检查常见的拼写错误，包括在不同情况下（大写，驼峰，Kebab情况等）写的单词。

在拼写错误的字词下会出现一个弯曲的下划线，在代码之前的左侧会出现一个小灯泡。 当您单击它时，您将能够看到正确拼写的建议，如图所示。

这些是从视觉和功能角度来看都有用的不同扩展的列表。 我希望您能找到其中一些对您的常规开发工作流程也有所帮助。

希望您喜欢这篇文章，并感谢您的阅读！

原文链接：

https://levelup.gitconnected.com/15-useful-vs-code-extensions-for-a-better-workflow-fe9fea926c0e​levelup.gitconnected.com