vscode 有哪些让人眼前一亮的插件?

我一直在折腾 VS Code 各种插件，有些真的不是“好用”两个字能概括的，而是那种“卧槽，怎么还有这种操作？！”的惊喜感。今天就来聊聊那些让我觉得眼前一亮、甚至是改变了我开发习惯的 VS Code 插件。

1. Prettier 代码格式化界的“统一战线”

这货我得第一个说，虽然很多人都知道，但它的“眼前一亮”在于它带来的“解放”。

它做什么？ 简单说，就是把你写的代码，按照预设的规则，瞬间变成整整齐齐、规范统一的样子。缩进、空格、换行、分号……所有这些平时最容易引发“小争执”的小细节，它全包了。
为什么眼前一亮？
告别无意义的格式争论： 团队协作的时候，代码风格分歧是常有的事。有了 Prettier，你只需要告诉它“按照这个规则来”，大家提交代码时，它自动帮你格式化，谁还跟你纠结“这里应该多一个空格吗？”。这简直是把团队成员从低效的争论中解放出来。
“保存即格式化”的极致体验： 配合 VS Code 的 `editor.formatOnSave` 设置，每次保存文件，Prettier 就自动执行。你写代码不用考虑格式，写完就保存，它帮你弄得妥妥的。这种“写完代码不用管它，它自己就会变干净”的感觉，是真的爽。
规则的高度定制化： 虽然它有默认规则，但你可以通过 `.prettierrc` 文件精细控制每一样东西。比如行长、单引号还是双引号、是否需要分号等等。这种灵活性让你既能享受统一，又能保持个性（在团队允许的范围内）。
支持的语言多： JavaScript, TypeScript, CSS, SCSS, JSON, HTML, Markdown... 基本上你前端开发会遇到的语言，它都能处理。

2. Live Server 实时预览的“即时反馈”

对于前端开发者来说，改一行 HTML 或者 CSS，然后去浏览器刷新查看，这个过程简直是煎熬。

它做什么？ 它会在你的本地启动一个服务器，并且当你在 VS Code 中保存文件时，它会自动刷新你的浏览器。
为什么眼前一亮？
即时反馈，丝滑流畅： 这种“写完立刻看到效果”的体验，对于调试和快速迭代来说，简直是质的飞跃。你改一个颜色、调整一个元素位置，保存后浏览器里的变化瞬间呈现，这种即时反馈让你对代码的理解和修改更加敏锐。
省去手动刷新的麻烦： 以前可能习惯了 `Ctrl+R`，现在有了 Live Server，你会发现自己这个动作越来越少，甚至忘了它的存在。
支持多浏览器： 你可以设置同时在多个浏览器中打开，方便你测试不同浏览器的兼容性。
简单易用： 安装后，在 HTML 文件上右键选择“Open with Live Server”或者点击状态栏的按钮即可启动。没有复杂的配置，上手门槛几乎为零。

3. GitLens — Git 操作的“超级增强”

如果你还在用命令行或者 VS Code 自带的 Git 功能，那么 GitLens 绝对会让你感觉像是从“功能机”升级到了“智能机”。

它做什么？ 它极大地增强了 VS Code 中 Git 的集成，让你能更深入、更直观地了解你的代码历史。
为什么眼前一亮？
行内 Git 历史（Git blame）： 这是我最喜欢的功能之一。当你查看代码时，每一行的最右侧会显示是谁、在什么时候、提交了什么信息，最后修改了这行代码。这对于理解一段代码的由来、作者的意图，或者排查 bug 的源头，简直是无价之宝。
强大的提交历史浏览： 它提供了比 VS Code 原生更丰富的 Git 历史视图，你可以轻松地搜索、比较、回滚等等。
代码块的 Git 历史： 不仅仅是行，它还可以让你看到某个代码块（比如一个函数）的完整 Git 历史，了解它的演变过程。
分支管理和可视化： 它能更直观地展示你的分支结构，帮助你更好地管理代码合并。

4. Path Intellisense 路径输入的“魔法师”

写路径，尤其是相对路径，是一件非常容易出错的事情。

它做什么？ 当你在代码中输入路径（比如导入模块、引用图片、链接 CSS 文件）时，它会提供一个智能的下拉列表，列出当前文件夹下所有可能的文件和文件夹，供你选择。
为什么眼前一亮？
告别手动输入，减少错误： 你只需要输入一部分，它就能帮你补全。这不仅省去了敲击键盘的时间，更重要的是，它极大地降低了因为路径拼写错误而导致的 bug。
清晰的层级感： 即使你的项目结构很复杂，它也能帮你清晰地展示层级关系，让你更容易找到目标文件。
支持多种文件类型： 不仅限于 JavaScript 模块，CSS、HTML、图片等都可以享受它的智能提示。

5. Bracket Pair Colorizer (现在内置于 VS Code，但以前是插件，依旧值得一提其“眼前一亮”之处)

虽然现在 VS Code 本身已经集成了这个功能，但在它成为内置功能之前，它绝对是一个让我眼前一亮的插件，因为它解决了困扰程序员多年的一个痛点。

它做什么？ 它会给成对出现的括号、花括号、方括号等，用不同的颜色来区分。
为什么（曾经）眼前一亮？
代码结构一目了然： 特别是在嵌套很深的函数或者复杂的 JSON 对象里，找到匹配的括号是一件非常痛苦的事情。有了这个插件，你能一眼看出哪个 `}` 对应哪个 `{`，代码的结构层次立刻清晰很多。
减少语法错误： 漏掉一个括号，或者括号不匹配，都会导致严重的语法错误。这个插件能让你更容易发现这些问题。
提升代码可读性： 就像给代码加了“高亮线”一样，让你的代码看起来没那么“密恐”，更容易阅读和理解。

6. Todo Tree 任务管理的“清晰罗盘”

写代码过程中，我们经常会留下 `TODO`、`FIXME` 这样的注释来标记待办事项或潜在问题。

它做什么？ 它会扫描你的整个项目，找出所有 `TODO`、`FIXME`、`HACK` 等标记的注释，并将它们以树状结构展示在一个侧边栏里，还包括它们所在的文件名、行号和具体内容。
为什么眼前一亮？
任务中心，一览无余： 以前这些注释可能散落在项目的各个角落，需要的时候还得一个个文件去找。有了 Todo Tree，你可以在一个地方看到所有待办事项，就像一个项目的“任务清单”。
直观的任务管理： 点击列表中的任何一个条目，VS Code 会直接跳转到对应的代码位置。这让你可以非常高效地处理这些待办项。
自定义你的标记： 你可以自定义需要扫描的标记词，比如加上 `BUG`、`OPTIMIZE` 等，让它更符合你的工作流程。

7. Remote SSH / WSL / Containers 远程开发的“无缝连接”

这组插件（主要是 Remote SSH）让远程开发体验变得前所未有的顺畅，感觉像是直接在本地开发一样。

它做什么？ 允许你直接连接到远程服务器（通过 SSH）、WSL (Windows Subsystem for Linux) 或者 Docker 容器，然后在 VS Code 中打开那个远程环境下的文件夹。
为什么眼前一亮？
本地般的开发体验： 你可以在自己熟悉的 VS Code 环境里，编辑、运行、调试在远程服务器上的代码。所有语法高亮、代码提示、调试功能都和在本地一样好用。
告别文件传输的繁琐： 不需要再一遍遍地 `scp` 文件了，直接操作远程文件，效率极高。
强大的环境隔离： 对于容器开发，你可以轻松启动一个干净、独立的环境进行测试和开发，避免了本地环境的各种“脏乱差”问题。
多场景支持： 无论你是要连接生产服务器、开发服务器，还是通过 WSL 在 Windows 上开发 Linux 应用，或者在 Docker 里捣鼓，它都能胜任。

写在最后

这些插件只是 VS Code 生态中很小的一部分，但它们带来的“眼前一亮”在于它们解决了实际开发中的痛点，提高了效率，并且让编码过程变得更加愉快和顺畅。

当然，每个人的工作流程和偏好都不同，可能还有很多其他优秀的插件没有提到。如果你有自己觉得“眼前一亮”的插件，也欢迎在评论区分享！探索 VS Code 的插件库，就像是在一个宝藏岛上寻宝，总能发现意想不到的惊喜。

有些插件看着好玩，装上看一下你就不会再用了，还有些插件所有人都推过，一堆人推来推去还是那么几个，越看越无聊，因此再说这些也没什么意思，还不如直接看下载排行榜去。

我选插件就一个标准：提升工作效率！分享几个我自己用的能让生活变得更容易的插件：

1）Project Manager：

用 vscode 经常在项目里切换来切换去，Open Directory 效率太低，命令行 code . 用着也不方便，这个 Project Manager 是解决这个痛点存在的：

• 左上是项目收藏面板，点击 “软盘”图标可以收藏当前项目，下次直接点击就切换。
• 左下是项目扫描，设定几个目录，会自动扫描这几个目录下面所有 svn/git 项目，双击切换。

有了这两个面板，项目切换随心所欲，想切就切。

2）Notes

笔记插件，安装后，设置一个存储笔记的地方，然后该路径下的 markdown 文件会专门显示在 Notes 插件的面板里，集中管理。当然有更专业的笔记软件，这个插件的优势是就在 vscode 的侧面板里，非常容易访问到，不需要多开一个软件，不影响当前 vscode 正在打开的项目，适合随手记录一些比较零碎的东西。

尤其适合记录一些代码相关的东西，然后设置保存在 onedrive 目录里，多台电脑云同步。搭配其他 markdown 插件，可以方便的实现笔记内链（按 CTRL+鼠标左键跳转），图床之类的功能。

3）vscode-mindmap

脑图支持，项目里新建一个 .km 文件，然后用它打开，直接编辑脑图，适合在没有装 xmind 的情况下，画一些脑图，同事支持多布局，多种风格；还有一个叫做 nano mindmap 的代替品：

可以直接打开编辑 .xmind 的文件，不过快捷键设置上我更喜欢上面那个。

4） http://draw.io

很多人推荐过的矢量图工具，我是重度使用的，如果说上面两个记笔记和脑图的插件我也还是同时会用其他笔记和脑图的软件，那么矢量图方面，我只用 http://draw.io，功能强，专业度高。

5）Dictionary Completion

字典补全，可以设置一个常用英文单词词典，然后辅助你输入单词的，写英文文档很有帮助，有些长单词知道怎么读，但是写出来经常写错的，有这个就好办了，支持模糊匹配，拿不准时随意输入点你记得的部分，它也能给你推荐最接近的。

6）HexEditor

二进制编辑器，安装后在左边文件树那里选择一个文件，鼠标右键 “Open With" 然后选择 HexEditor 打开即可，偶尔需要编辑下二进制时，不需要再去下载安装一个专门软件。

7）Bookmarks

经常在文档几个不同位置跳来跳去的，这个书签插件很实用，右键菜单里直接设置/取消书签，快捷键在不同的书签位置跳转，左边还有当前书签列表，双击立马跳转。

8）GitHub Repositories

打开远程 github 仓库，F1 选择 Remote Repositories: Open Remote Repository 然后帖任意一个 github 项目的 url 就能打开了：

有时候网页上读某个 github 项目的代码太麻烦，全部 clone 下来太费时间，用这个插件就可以快速打开远程仓库，按需请求文件内容，读起代码来飞快。

9）MetaJump

快速光标移动，类似 vim 里的 easymotion，如果你经常使用键盘，那么按 ALT+/ 然后再随便敲一个字母，比如上图中敲了个小写字母 "n" ，然后屏幕内所有出现 "n" 的地方都被蓝色高亮起来，并且上面覆盖了一个快捷字母，再按一下相应字母，就可以直接跳到该处，比如再按一下 "a" 就能跳到 13 行的 "notebook...." 的 "n" 字母上。

总共按三次键就可以移动到屏幕内任意地方，用熟了基本指哪打哪。

10）Blockman

很酷的一款小插件，用浅显的背景色，直观的展示代码的层次结构。

11）Window Colors

适合多开 vscode 的同学们，看着几个 vscode 窗口经常蒙圈找不到谁是谁的，可以为每个项目制定一个专属的颜色，多开窗口再也不会迷路。

12）todo tree

找出代码里所有包含：TODO 和 FIXME 的注释，并且列在左边面板中，方便你快速定位代码里的 TODO。 有时候代码不会一次写完，有时候某处只是先用一个临时方案，后面还需要继续完善，这时候人们习惯在注释里加一条 TODO 字样，这个插件就是帮你快速列出项目内所有文件还需要完成的任务，避免遗漏某些需要进一步完善的地方。

--

12个凑够一打了，先写这些吧。

收藏比赞多一倍，怎么回事情？点个赞手指头会疼吗？

--

这有一个 VSCode 里的程序员彩虹屁插件，名叫 VSCode Rainbow Fart。它能根据你的代码内容说出不同的话，简直就是个“程序员鼓励师”，声音软萌软萌的。

简而言之，就是能根据代码关键词，播放贴近代码意义的语音，在你编程的过程中，疯狂输出赞美。

真的是，萝莉音程序员鼓励师24小时在线，陪你 coding 到天明。

内置中文语音包采用真人语音，支持 JavaScript 语言的常用关键字（支持到 ES6 版本）。

不仅如此，还有专门针对时间的语音。

比如连续写了一小时代码，鼓励师小姐姐就会关心你：

写得累不累啊，起来休息一下吧。

中午11点半，会按时提醒你吃午饭。夜幕降临，还会提供加班关怀。

如果你正跟产品经理大战三百回合，情不自禁敲出 f**k、s**t 这样的字眼。

小姐姐也能敏锐地捕捉到你的情绪，跟你一起怼产品：

怎么啦，是不是产品需求又改了啊？
我们一起揍产品经理一顿吧！

安装指南

是不是有点怦然心动，想要体验一下一顿猛夸之中写码效率直线飞升的感觉？

由于当前插件内语音均为中文，所以作者并没有发布到 VSCode 商店，需要到项目页里下载 VSIX 插件。

然后，打开 VSCode，调出命令面板，输入：

Extensions: Install from VSIX

在弹出的文件选择窗口中打开下载好的插件。

安装完成后，再次调出命令面板，输入以下命令启动插件：

Enable Rainbow Fart

点击右下角弹出通知中的 Open 按钮（或访问 http://127.0.0.1:7777）

就会打开这样一个网页：

点击授权，保持网页打开，再回到 VSCode 中，无限彩虹屁就可以听起来了。

内置语音由来自华中科技大学的人工智能与自动化研究生 @JustKowalski 小姐姐提供。

除了内置语音，该项目也支持导入自定义语音包。主要步骤如下：

创建一个包含关键字段的 .json 元信息文件。

之后，将录制好的音频文件拷贝到与 manifest.json 同级的目录中，完成关键字匹配。

目前，项目内置语音包仅支持 JavaScript，Issues中也有不少小伙伴希望这个虚拟程序员鼓励师能支持更多编程语言。

对此，项目作者在 Issues 中回复称，目前这个项目由他和提供语音的小姐姐两个人维护，要覆盖更多语言，工作量有点大。

因此，他希望借助开发者社区的力量，收录更多语音包，以扩展彩虹屁的多样性。

下一步的开发目标也将按这个方向进行，作者希望构建一个能够轻松添加语音的工具，让非程序员也可以创建自定义语音包。