用了这些vscode插件前端同学再也不996了

最新推荐文章于 2025-11-07 10:00:00 发布

原创最新推荐文章于 2025-11-07 10:00:00 发布 · 1.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #新星计划 #vscode #插件

本文介绍了VSCode中的各种实用工具，如turbo-console-log日志管理、import-cost性能控制、Prettier代码格式化、代码片段扩展、Git增强工具和个性化设置等，帮助开发者优化工作流程和提高生产力。

君子生非异也，善假于物也。

自动化日志消息

链接：https://github.com/Chakroun-Anas/turbo-console-log

当涉及到日志消息时，turboconsole -log扩展支持您。它自动编写有意义的日志消息，并自动插入它们。

使用turbo-console-log自动插入有意义的日志消息。

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

控制导入包大小

链接：https://github.com/wix/import-cost

我们都知道性能很重要，但在实践中，当您在编写代码的过程中避免忽视这个问题，开发者来说可能是一个相当大的挑战。为了控制您的包大小，import cost 扩展让您立即知道您是否正在将一个大包导入到您的项目中。

使用import-cost控制包大小。

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

代码格式化，自动化

链接：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

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

Prettier，一个非常固执（但友好）的代码格式化程序，可在您按 Save 时格式化代码。

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

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

链接：https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

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

Burke Holland 为您提供了一系列基本的 React 片段和命令，这些片段和命令是他从日常 React 使用中选择的。如果您正在寻找 Angular 片段，John Papa 已经为您提供了帮助。他的扩展程序将Angular for TypeScript 和 HTML 的片段添加到您的 VS Code 设置中。

[

Vue.js VSCode Snippets，作者 Sarah Drasner，Vue.js 代码片段的金矿。

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

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

编写您自己的代码片段

链接：https://mauricebrg.com/article/2020/12/make_your_own_custom_code_snippets_in_visual_studio_code.html

有很多不同语言的代码片段插件，但是你有没有想过如何在 VS Code 中定义你自己的代码片段？Maurice Borgmeier 总结了入门所需的一切知识。

您需要了解的有关 VS Code 中的自定义代码段的所有信息， Maruice Borgmeier 的详尽指南。

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

很酷的代码截图

链接：https://marketplace.visualstudio.com/items?itemName=pnp.polacode

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

Polacode可让您直接在 VS Code 中截取和编辑代码的屏幕截图

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

友好的注释

链接：https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

你如何处理评论？如果您的代码需要大量注释，那么让不同类型的注释显示不同颜色是个非常好的方式，这样会让你一目了然，例如，或者如果这是你的队友留给你的待办事项。

Better Comments可帮助您将注释分类为警报、查询和待办事项。

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

Chrome 在 VS Code 中调试

链接：https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-codes

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

![](https://img-blog.csdnimg.cn/img_convert/fd960facb39697d59b3031f1e7e055b1.png

使用Chrome Debugger for VS Code无需离开编辑器即可调试 Chrome 。

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

VSCode 扩展的开发者工具

链接：https://github.com/microsoft/vscode-edge-devtools

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

VS Code 中的 DevTools：用于 Visual Studio Code 的 Microsoft Edge 开发人员工具。

该扩展在 VSCode 中显示了浏览器的元素和网络工具，使您能够查看运行时 HTML 结构、更改样式和布局、执行诊断和调试您的项目 - 无需离开编辑器。

VS Code 的文件管理实用程序

链接：https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

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

File Utils是一个扩展，使您能够创建、复制、移动、重命名和删除文件和目录。

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

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

链接：https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops

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

在这里插入图片描述

File Ops允许您向 VS Code 中的文件添加标签。

File Ops VS Code Extension允许您标记和别名文件，然后在它们之间快速切换。您还可以快速列出所有标签以防万一您忘记了它们，查看当前目录中的所有文件并在同一文件夹中的 .css 和 .js 文件之间切换。

VS Code 中的文件夹图标

链接：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

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

您可以调整 VS Code 文件和文件夹的图标，使它们更容易区分。使用VSCode 图标。

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

用于编码的等宽字体

链接：https://coding-fonts.css-tricks.com/

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

等宽编码字体为您带来愉快的编码体验。

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

Git 增强

链接：https://github.com/eamodio/vscode-gitlens

一个有用的扩展来增强VS Code 中内置的 Git 功能是GitLens。为了更好地理解您正在处理的代码，GitLens 可让您一瞥更改行或代码块的人、原因和时间。

使用GitLens在 VS Code 中无缝导航和探索 Git 存储库。

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

VS Code 中的 Git 历史

链接：https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

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

使用Git History在未来轻松导航。

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

代码注释高亮

链接：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

您是否有时会忘记查看在编码时添加的待办事项？该TODO高亮延伸提醒你，有你发布到生产之前需要您注意的笔记或事物。

TODO Highlight允许您在发布到生产之前提醒待办事项。

关键字TODO和FIXME已预先配置，但您可以根据自己的喜好自定义配置。让您的代码注释进行高亮。一个很棒的小提醒。

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

链接：https://github.com/CoenraadS/Bracket-Pair-Colorizer-2

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

使用Bracket Pair Colorizer轻松突出匹配标签。一个真正的节省时间。

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