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

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

自动化日志消息

链接：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即可获取所有这些的列表。

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

• Accessibility Snippets
• ES7 React/Redux/GraphQL/React-Native
• CSS
• CSS Grid
• HTML
• Node.js
• JavaScript (ES6)
• Angular 10
• Vue.js + TypeScript
• WordPress
• WordPress Gutenberg
• PHP
• PHP工具
• Svelte
• TensorFlow

编写您自己的代码片段

链接：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。

揭露非法字符

链接：https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins

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

Gremlins Tracker跟踪零宽度空格、非连接符和所有通配符。

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

突出显示缩进

链接：https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

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

使用Indent-Rainbow使缩进更具可读性。

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

可视化堆叠上下文

链接：https://marketplace.visualstudio.com/items?itemName=felixfbecker.css-stacking-contexts

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

使用CSS Stacking Contexts轻松可视化 CSS堆叠上下文。

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

自定义颜色区分工作区

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

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

在 VS Code 中使用Peacock巧妙地更改工作区的颜色以区分它们。

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

IntelliSense：人工智能代码辅助工具

链接：https://visualstudio.microsoft.com/zh-hans/services/intellicode/

该IntelliCode扩展提供了为Python，TypeScript/ JavaScript和Java开发AI辅助代码补全，通过机器学习来理解您代码的上下文。

为什么不通过人工智能的闪光来促进您的发展？IntelliCode随时为您提供帮助。

该扩展提供 AI 辅助的 IntelliSense，在完成列表的顶部显示最符合您需要的代码。当涉及到重载时，它不会遍历按字母顺序排列的成员列表，而是首先向您显示最相关的列表。不用再自己搜索列表。

为您的代码库记录引导式入门

链接：https://github.com/microsoft/codetour

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

入门，简单的方法：记录和回放代码库的导览。

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

从 GitHub 到 VS Code，一秒搞定

链接：https://github1s.com/s

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

从 GitHub 到 VS Code，一秒钟。那是Github1s。

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

VS Code 的宠物

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

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

曾经想给你的 VS 代码编辑器打气吗？或者在 VS Code 中玩接球？您可以使用VS Code Pets做到这一点。

从扔球和与宠物接球(run vscode-pets.throw-ball) 到添加其他宠物 (run vscode-pets.spawn-pet)，您编写的工作流程肯定不会无聊！

加速 JavaScript / TypeScript 原型设计

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

如果您正在寻找一种加快 JavaScript 原型制作过程的方法，Quokka适合您。快速原型制作游乐场位于您的编辑器中，可为原型制作、学习和测试 JavaScript 和 TypeScript 提供速度提升。

Quokka，一个有用的小工具，用于在 JavaScript 和 TypeScript 中进行快速原型设计。

运行时值会在您键入时更新并显示在您的代码旁边。为了让您立即启动并运行，不需要任何配置，开始试验所需要做的就是打开一个新的 Quokka 文件。快乐的原型制作！

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

链接：https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

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

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

实时编译 Sass

链接：https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

具有实时浏览器重新加载功能的实时 Sass 编译器？Live Sass 扩展已让您满意。它可以帮助您实时将 SASS/SCSS 文件编译/转换为 CSS 文件。

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

没有人愿意告诉你的提示和技巧

链接：https://www.vscodecandothat.com/

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

VS 能做到吗？提示和技巧可帮助您充分利用 VS Code 必须提供的强大功能。

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

避免996，提高效率，多陪家人！