对前端开发人员有用的 VS 代码扩展

我们在文本编辑器上花费了很多时间，并且时不时地遇到那些让我们慢下来的令人沮丧的小问题。 也许找到正确的文件需要太长时间，或者找到一个匹配的右括号本身就变成了一个冗长的冒险。

让我们永远解决所有这些烦恼。 在这篇文章中，我们研究了用于前端开发的有用的 VS Code 扩展，从精细的生产力助推器到高级调试助手。

目录

您将在下面找到您可能需要的特定扩展的快速跳转。 向下滚动查看一般概述。 或者跳过目录。

• 自动化日志消息
• 捆绑大小
• 代码格式化
• 代码截图
• 代码片段（React、Vue、TypeScript）
• 自定义片段
• 注释
• 调试
• 开发工具
• 文件工具
• 文件标签和标签
• 文件夹图标
• 用于编码的字体
• 吉特
• Git 历史
• 突出显示注释
• 突出显示括号和标签
• 突出显示有害字符
• 突出显示缩进
• 突出显示堆叠上下文
• 突出显示工作区
• 智能代码
• 入职
• 快速打开 GitHub
• 宠物
• 快速 JS/TS 原型设计
• 远程 SSH 访问
• Sass 编译
• 技巧和窍门

自动化日志消息

当涉及到日志消息时，turbo-console-log 扩展会为您提供支持。 它使编写有意义的日志消息的操作自动化并自动插入它们。

您需要做的就是选择要调试的变量，按Ctrl + Alt + L ，日志消息将插入下一行。 键盘快捷键可让您评论、取消评论或删除当前文档中的所有日志消息。

控制捆绑包大小

我们都知道性能很重要，但在实践中，当您在编写代码的过程中不忘记它可能是一个很大的挑战。 为了控制你的包大小，导入成本扩展可以让你立即知道你是否将一个大包导入到你的项目中。

Import Cost 不是捆绑包分析工具，但其构建的目的是帮助您在将性能瓶颈发送给用户之前找到可能的性能瓶颈。 为此，它会在您导入第三方库时在您的代码行旁边显示导入的第三方库的大小，从而为您提供即时反馈。 一个得心应手的小帮手。

代码格式化，自动化

编写代码时，很多时间都花在了格式化上。 Prettier 为您自动完成任务。 它删除了所有原始样式并确保输出的代码符合一致的样式。

Prettier 解析您的代码并使用自己的规则重新格式化它，考虑最大行长度并在必要时包装代码。 您决定是否要将其应用于所有语言，或者您可以定义您喜欢手动格式化的语言。 对于难以找到通用风格指南的团队来说，这也是一个很好的解决方案。

有用的代码片段（React、Vue、TypeScript、jQuery）

您是否厌倦了一遍又一遍地输入您经常需要的片段，总是从头开始？ 这里有一些方便的小帮手来减轻工作。 对于 Vue，请务必查看 Sarah Drasner 的 Vue.js VS Code Snippets 扩展。 它是为实际使用而构建的，专注于开发人员的人体工程学，而不是对 API 定义进行编目。

Burke Holland 为您提供了一系列基本的 React 片段和命令，这些都是他从日常 React 使用中选择的。 如果您正在寻找 Angular 代码片段，John Papa 已经为您提供了保障。 他的扩展为你的 VS Code 设置添加了用于 TypeScript 和 HTML 的 Angular 片段。

这两个也可能派上用场：Charalampos Karypidis 的 JavaScript 代码片段扩展包含 ES6 语法的片段，并支持 JavaScript 和 TypeScript。 最后但同样重要的是，Don Jayamanne 的 jQuery 代码片段包含 130 多个 jQuery 片段。 安装后，只需键入jq即可获取所有这些列表。

说到片段：如果您更喜欢一个好的片段库而不是自己从头开始定义它们，那么这些集合会得到您的支持：

• 辅助功能片段
• ES7 React/Redux/GraphQL/React-Native
• CSS
• CSS 网格
• HTML
• 节点.js
• JavaScript (ES6)
• 角 10
• Vue.js + 打字稿
• WordPress
• WordPress 古腾堡
• PHP
• PHP 工具
• 苗条
• TensorFlow

编写自己的代码片段

有很多针对不同语言的代码片段插件，但是你有没有想过如何在 VS Code 中定义自己的代码片段？ Maurice Borgmeier 总结了您开始时需要知道的一切。

关于该主题的另一篇精彩文章来自 Rob O'Leary。 他深入探讨了何时以及为什么使用代码片段，仔细研究了不同类型的代码片段，VS Code 如何处理它们，当然，最后但并非最不重要的是，如何编写自己的代码片段。

代码截图，花式方式

老实说，拍摄漂亮的代码截图可能是一个挑战。 Polacode 就是为了改变这一点。

Polacode 被描述为“代码的宝丽来”，可让您直接在 VS Code 中截取和编辑代码的屏幕截图。 您可以通过拖动角来调整代码容器的大小并使用命令来控制图像外观。 一个很好的解决方案，可以让你花费这么多小时的代码在最好的光线下闪耀——例如在博客文章或演示文稿中。

人性化评论

你如何处理评论？ 如果您的代码需要大量解释，最好让那些通常呈灰色显示的注释更人性化，这样如果注释提醒您注意已弃用的方法，则更容易一目了然，例如，或者如果这是你的队友留给你的待办事项。

VS Code 扩展 Better Comments 可帮助您做到这一点，将注释分类为警报、查询、待办事项、突出显示等。 注释掉的代码也可以设置样式以明确它不应该存在。

VS Code 中的 Chrome 调试

您是否使用 Chrome 并在调试时发现自己在浏览器和编辑器之间来回切换？ 然后你可能想试试 VS Code Chrome 调试器。 它可以帮助您直接从 VS Code 调试在 Chrome 中运行的客户端 JavaScript 代码。

调试器通过其 Chrome 调试器协议连接到 Chrome，它将浏览器中加载的文件映射到您在 VS Code 中打开的文件。 因此，无需离开编辑器，您就可以在源代码中设置断点，设置要监视的变量，并在调试时查看完整的调用堆栈。 一个让你的调试程序更简单的小工具。

用于 VSCode 扩展的 DevTools

将 DevTools 集成到您的代码编辑器中，这样您就不需要在两者之间来回切换，这不是很酷吗？ 如果您使用的是 VSCode 和 Edge，则可以通过一个小扩展来实现。

该扩展在 VSCode 中显示了浏览器的元素和网络工具，使您能够查看运行时 HTML 结构、更改样式和布局、执行诊断和调试项目 - 无需离开编辑器。 顺便说一句，Rachel Weil 几周前在旧金山 SmashingConf 上分享了一些使用基于 Chromium 的浏览器（如 Edge 和 Chrome）的便捷 DevTools 技巧。 请务必收听录音，让您的 DevTools 技能更上一层楼。

VS Code 的文件管理工具

很多时间通常花在组织和管理文件上。 File Utils 使任务更方便。

该扩展使您能够使用少量命令创建、复制、移动、重命名和删除文件和目录。 它还支持大括号扩展，可以自动生成任意字符串来设置您的文档结构。

在编辑器中向文件添加标签

在大型项目中，要查找组件的一个特定变体，或者只是正确的文件，您需要知道您实际要查找的文件。 但是，如果您可以为特定文件添加书签或标签，这样您就可以更快地找到它们呢？

File Ops VS Code Extension 允许您标记和别名文件，然后在它们之间快速切换。 您还可以快速列出所有标签以防忘记它们，查看当前目录中的所有文件并在同一文件夹中的 .css 和 .js 文件之间切换。 您还可以观看视频，了解它是如何工作的。 现在它会派上用场！

VS Code 中的文件夹图标

VS Code中的自定义文件和文件夹图标？ 是的，请！ 为了帮助您更轻松地操作您的工作区，即使涉及大量文件和文件夹，VS Code Icons 团队也发布了一个扩展，可以为您的编辑器带来图标。 从“access”到“zip”，从“Android”到“www”，集合一定有你需要的文件和文件夹图标。

项目特定的图标切换功能和项目自动检测将自动检测您在工作区中打开的项目类型，并提示您相应地切换图标。 如果您愿意，也可以使用自定义图标。

用于编码的等宽字体

编程字体无疑是排版中的主力军。 它们需要提供出色的可读性，支持快速文本扫描，并防止眼睛疲劳，即使开发人员查看代码数小时也是如此。 为了帮助您找到满足您需求的编程字体，Chris Coyier 策划了Coding Fonts ，选择了 30 多种（大部分是免费的）等宽字体，它们都符合此标准。

为了更容易做出决定，每种字体都附有简短的描述、所有字符的概述，以及日夜模式下的 HTML、CSS 和 JavaScript 代码示例。 Mostafa Gaafar 为开发人员维护了一个类似的字体列表，还可以选择查看不同配色方案的代码示例。 要将自定义字体添加到 VS Code，您需要在“设置”中定义字体。

Git 增压

增强 VS Code 中内置的 Git 功能的一个有用扩展是 GitLens。 为了更好地理解您正在处理的代码，GitLens 可让您一瞥谁、为什么以及何时更改了行或代码块。

该扩展一目了然地可视化代码作者身份，帮助您无缝导航和探索 Git 存储库，通过比较命令获得有价值的见解等等。 无需离开编辑器，您需要了解的有关代码库的所有信息都触手可及。

VS Code 中的 Git 历史

查看和搜索 git log 以及图形和详细信息、查看您正在处理的文件的先前副本、搜索历史记录、比较分支和提交——这些只是 Git History 扩展提供的一些简化功能您的工作流程。

说到 Git：在使用 Git 时，另一个值得仔细研究的 VS Code 扩展是 Git Graph：它可以让您查看存储库的 Git 图并轻松地从图中执行 Git 操作。

突出显示代码中的注释

您是否有时会忘记查看您在编码时添加的待办事项？ TODO Highlight 扩展程序会提醒您在发布到生产环境之前需要注意一些注释或事情。

关键字TODO和FIXME是预先配置的，但您可以根据自己的喜好自定义配置。 命令会在您的代码中或作为所有注释的列表突出显示打开的注释。 一个很棒的小提醒。

突出显示匹配的括号和标签

激烈的编码会议会使眼睛疲劳，因此任何有助于提高视觉清晰度的东西都是受欢迎的帮手。 要在使用 VS Code 时将语法高亮提升到一个新的水平，您可能需要查看 Bracket Pair Colorizer。 扩展识别匹配的括号 - 以您定义的颜色。

现在您已经完全控制了括号，另一个需要注意的小细节是匹配开始和结束标签。 VS Code 已经带有标签匹配功能，但它是相当基础的。 突出显示匹配标签扩展可以更彻底地完成工作，匹配任何地方的标签——从标签属性到内部字符串——甚至在状态栏中突出显示从标签到标签的路径。 广泛的样式选项可让您自定义标签的突出显示方式。 官方支持 HTML 和 JSX。

揭示有害角色

零宽度空格和非连接符、不间断空格、左右双引号——编码时，某些字符可能是有害的，因为它们不可见或看起来像合法字符。 Gremlins Tracker 会为您找到它们。

Gremlins Tracker 使用配色方案来提醒您有害、潜在有害和危害较小的字符。 包含此类字符的行标有 Gremlins 图标，将光标移到该字符上会提示您可能存在问题。 如果您愿意，您可以添加新的 gremlins 字符或为特定语言覆盖它们。

突出显示缩进

缩进是确保您的代码可以被快速扫描的关键。 Indent-Rainbow 是一个方便的小插件，可以使缩进更具可读性。 它为文本前面的缩进着色，每一步交替使用四种不同的颜色，并标记那些缩进不是制表符大小倍数的行。

虽然错误突出显示很有用，但在某些情况下它可能会妨碍您。 例如，在处理 RegEx 模式时。 幸运的是，Indent-Rainbow 可以让你关闭错误突出显示，就像评论行一样，如果你愿意，你甚至可以跳过整个语言。

可视化堆叠上下文

使用z-index时，您是否难以发现堆叠上下文？ 你不是一个人！ 如果您有时发现自己在一个元素上将z-index设置为十亿并且它没有按照您的堆叠顺序向前移动，那么 CSS Stacking Contexts 适合您。

该扩展使堆叠上下文在 CSS 和 SCSS 中可见，因此您可以在编写z-index声明时自信地使用小值。 此外，它还会告诉您z-index声明何时无效并提供快速修复。

自定义颜色来区分工作区

如果您经常打开多个 VS Code 实例并且难以区分它们，Peacock 可能值得仔细研究一下：该扩展巧妙地改变了您工作区的颜色主题。

但是，Peacock 不仅在同时处理多个项目时大放异彩。 当您使用 VS Live Share 或 VS Code 的远程功能并且您想要快速识别您的编辑器时，它也会派上用场。

IntelliSense：人工智能辅助开发功能

IntelliCode 扩展在 Visual Studio Code 中为 Python、TypeScript/JavaScript 和 Java 开发人员提供 AI 辅助开发功能，并基于对代码上下文的理解与机器学习相结合的见解。

该扩展提供 AI 辅助 IntelliSense，在完成列表顶部显示为您的代码上下文推荐的自动完成项。 当涉及到重载时，它不会循环按字母顺序排列的成员列表，而是首先向您显示最相关的一个。 不再需要自己搜索列表。

为您的代码库录制引导式入职培训

庞大的代码库会让人感到恐惧。 CodeTour 试图改变这一点。 该扩展允许您直接在编辑器中记录和回放代码库的引导演练。 将其视为一个目录，可以更轻松地加入或重新加入新项目或功能区域、可视化错误报告或了解代码审查的上下文。

要创建代码浏览，您可以注释代码行（支持 Markdown）并根据需要导航任意数量的文件，并且记录器会捕获序列。 游览可以签入回购或导出到“游览”文件，以便任何人都可以重播它而无需克隆任何代码。 便利！

一秒钟从 GitHub 到 VS Code

一旦你在 GitHub 上发现了一段代码，如果你想立即开始在你的项目中使用它怎么办？ 您可以使用 Github1s，而不是克隆 repo 并找到您需要的文件。 只需在 URL 中的github后添加1s ，按 Enter，repo 或单个文件将直接在 VS Code 中打开。

您还可以使用书签在github.com和github1s.com之间快速切换，访问私有存储库，并且项目页面上还列出了许多浏览器扩展。 如果您需要替代方案，Gitpod 是一个稍微高级一点的选项，它还允许您启动在线开发环境、运行并行工作区并协作处理代码库。

VS 代码的宠物

曾经想增强你的 VS 代码编辑器吗？ 那么，添加一只猫、狗、蛇、橡皮鸭，甚至是好的 ol' Clippy 怎么样？ 您需要做的就是安装 vscode-pets 并运行vscode-pets.start命令以查看面板。 一旦你选择了一只宠物，它的皮毛颜色和大小，向后靠，看着它们与你互动！

从扔球和和你的宠物玩接球（运行vscode-pets.throw-ball ）到添加额外的宠物（运行vscode-pets.spawn-pet ），你的编码工作流程一定不会无聊！ 创作者 Anthony Shaw 对想法和讨论持开放态度，并随时欢迎反馈。

加速 JavaScript / TypeScript 原型设计

如果您正在寻找一种方法来加快您的 JavaScript 原型制作过程，那么 Quokka 就是您的最佳选择。 快速原型设计游乐场位于您的编辑器中，并为原型设计、学习和测试 JavaScript 和 TypeScript 提供了速度提升。

当您键入时，运行时值会更新并显示在您的代码旁边的 IDE 中。 为了让您立即启动并运行，无需配置，您只需打开一个新的 Quokka 文件即可开始试验。 原型制作快乐！

使用远程机器作为您的开发环境

出于多种原因，您可能希望使用带有 SSH 服务器的远程计算机作为开发环境。 因为您需要比本地机器更快或更专业的硬件，例如，或者调试在其他地方运行的应用程序，例如客户站点或云中的应用程序。 为了简化开发和故障排除，Remote - SSH 扩展可以帮助您做到这一点。

该扩展直接在远程机器上运行命令和其他扩展，因此您的机器上不需要任何源代码。 相反，您可以像往常一样打开远程计算机上的任何文件夹并使用它，充分利用 VS Code 的完整功能集。 便利！

实时编译 Sass

带有实时浏览器重新加载的实时 Sass 编译器？ Live Sass 扩展已为您服务。 它可以帮助您实时编译/转换您的 SASS/SCSS 文件为 CSS 文件。

功能包括自定义导出 CSS 的文件位置及其样式和扩展名，有一个快速状态栏控件，您可以在设置中排除特定文件夹，并且还支持自动前缀。

没人愿意告诉你的技巧和窍门

你真的充分利用了 VS Code 提供的强大功能吗？ Burke Holland 和 Sarah Drasner 声称你没有，所以为了改变这一点，他们分享了关于 VS Code 的所有最好的东西，没有人愿意告诉你。

从使用正确大小的图像自动更新 HTML img标签到在编码或记录点以从应用程序中记录信息时使用字体连字以提高可读性，“VS Code 可以做到这一点吗？！” 具有36 个有价值的提示，可让您的工作流程更加高效。

包起来

实际上有数百个 VS Code 扩展，我们希望这里列出的一些扩展对您的日常工作很有用——最重要的是可以帮助您避免一些耗时的例行任务。 祝大家编码愉快！

延伸阅读

• CSS 审计工具
• CSS 生成器
• SVG 生成器
• HTML 电子邮件工具和模板
• 原版 JavaScript 代码片段
• 可访问的前端组件
• 另外，订阅我们的时事通讯不要错过下一个。