个

20 个你实际会用到的 VS Code 扩展

2025-06-04

20 个你实际会用到的 VS Code 扩展

我注意到几篇 VS Code 扩展帖子，并且对所提到的扩展（除了几个）感到非常失望，所以我想我应该编制我个人使用的插件列表。

我认为这些扩展对于任何想要充分利用 Visual Studio Code 的前端开发人员来说都很有帮助。其中一些扩展你可能已经拥有了——因为它们是平台上最推荐的扩展——但其他一些扩展你可能还没有。

易于阅读

  • 美化- 通过缩小和适当间隔可怕的标记，使 HTML、CSS 和 JS 非常易于阅读。

  • 更好的注释- 在您的代码中创建更人性化的注释。我一直在使用这个功能。这是我们开发团队的必备扩展。

  • 书签- 它可以帮助您在代码中导航，轻松快速地在重要位置之间移动。我将其与 MetaGo 结合使用，这样在编码时几乎无需使用鼠标。

  • MetaGO - 超快的光标移动/选择功能，让您专注于键盘操作。这彻底改变了我使用 VS Code 的方式。真的。

  • 日志文件荧光笔- 正如其名，它为 VSCode .log 文件提供支持，因此您实际上可以阅读这些日志转储而不会让眼睛流血。

  • 参考线- 现在你不用再折叠再打开所有烦人的元素来弄清楚嵌套了。这和上面提到的 Beautify 以及下面的 Rainbow Brackets 配合得很好。

  • Rainbow Brackets - 高亮显示当前所在的括号集，并用不同的颜色标记其余部分，以便轻松识别位置。如果您是一位重度 JS 开发人员，那么这是一款非常不错的扩展。

  • 图片预览- 在页边距和鼠标悬停时显示图片预览。这是检查我是否引用了正确的图片/图标的关键。

  • GitLens - 毫无疑问是最常用的扩展之一；GitLens 是 VS Code 的必备工具，它能大幅提升 Git 的整体体验。建议将其与.gitignore和.diff扩展配合使用，以获得更佳的覆盖范围。

更快的编码

  • CSS Peek - 灵感源自 Brackets 中类似的 CSS 内联编辑器功能。这是我在 VS Code 中最喜欢的 Brackets 功能之一。

  • stylelint - 我们会对 JS 代码进行 lint 处理，那么为什么不也对 LESS/SASS/CSS 代码进行 lint 处理呢？它非常适合快速清理凌乱的 CSS。

  • 实时 Sass 编译器- 当然，您有 Gulp、Webpack、NPM 和 Grunt，但有时您希望在浏览器实时刷新的情况下将 SASS/SCSS 文件实时编译/转译为 CSS 文件。这款工具正是如此。

  • 实时服务器- 最佳本地开发服务器，具有静态和动态页面（甚至 PHP！）的实时重新加载功能。

  • Version Lens - 将指定 package.json 的依赖项/devDependencies 更新至最新版本。推荐人：Mihail

  • DotENV - 增加了对 .env 文件的支持和突出显示 - 我非常依赖于将其推送到 Heroku、Netlify 等...

漂亮的截图

  • Polacode - 高亮代码，使用代码主题的颜色截取精美的屏幕截图。非常适合用于教程或文档，并提供代码示例。

多个实例

  • 设置同步- 使用私有 gist 保存设置文件，以便您在多个 VS Code 实例之间同步设置、代码片段、主题、文件图标、启动项、按键绑定、工作区和扩展。我使用这个功能，只需两个简单的命令即可保持我的笔记本电脑、工作桌面和家庭桌面同步。

  • EditorConfig - 使用 .editorconfig 文件中的设置覆盖用户/工作区设置。我使用它来为每个项目强制执行开发团队的特定规则。

所以，虽然我还有很多其他插件更适合我使用的环境（前端 Web + Azure 云），但希望你会发现这些扩展在你日常使用 VS Code 时很有用！

如果你已经用过这些扩展，并且喜欢或讨厌它们，请告诉我。或者，我可能漏掉了一些值得尝试的扩展！

值得一提

在收到你们在评论中向我展示的一些你们最喜欢的 VS Code 扩展的反馈后，这里有一些我认为足够可靠的新扩展，也包括：

文章来源：https://dev.to/vip3rousmango/vs-code-extensions-youll-actually-use-46gp
Devto 翻译
PREV
理解 JWT 身份验证：包含示例的综合指南
NEXT
如何使用 react-hook-forms 在 React 中创建动态表单。