新手必装的 VSCode 宝藏插件：效率直接起飞

前言

说实话，常见的插件推荐你们应该早就看腻了。 什么 Chinese Language Pack、Prettier、ESLint 之类，装 VSCode 第一天就会有人告诉你必装，根本没啥新鲜感。

今天这篇，我打算掏点压箱底的私货，安利一些真正能让你写代码像开挂的 VSCode 插件。 有的能省你 90% 的 debug 时间，有的能让多人协作效率翻倍，还有的能直接提升代码逼格，截图发群立马「大佬」光环拉满。

我自己这些年码代码，从前端到后端，踩过不少坑，也搜集了一堆宝藏插件。现在挑出 18 款我觉得最值得新手尝试的，保证你用过之后，和别人还在 ctrl+c / ctrl+v 的时候，你已经「指哪打哪」了。

1. Console Ninja

还在 console.log → 切到浏览器 → F12 → 找半天输出？ Console Ninja 直接把控制台结果贴在代码行尾，返回值、报错、网络请求，像弹幕一样实时冒出来。

再也不用 alt+tab 疯狂切换，写前端尤其爽。比如调接口的时候，接口返回的 JSON 数据能直接显示在右边，盯着代码就能改。

👉 前端人必备，调试体验直接飞升。

2. Turbo Console Log

选中变量 → Ctrl+Alt+L → 自动生成带文件名、行号、emoji 的 console.log。 调试的时候不用一个个手写，日志排版整整齐齐，轻松定位。

上线前怕忘记删？按 Alt+Shift+D 一键清空，只删插件生成的，不会误伤你手写的关键日志。 这波安全感，满分。

3. Quokka.js

这是我最爱的插件之一。 新建一个 .js 文件 → Ctrl+K Q → 写代码，右边直接显示运行结果。

相当于「VSCode 里的 JS playground」，不用频繁 node index.js 或 console.log，写一行看一行结果，尤其刷算法题、测试小函数的时候效率爆炸。

新手学 JS/TS 必装，能直观感受代码运行。

4. Peacock

有些人喜欢同时开多个 VSCode 窗口：前端项目一个、后端服务一个、测试项目一个。 结果切来切去经常搞混，分分钟 rm -rf 错地方。

Peacock 可以给不同的工作区上色，比如：

• 前端 = 蓝色
• 后端 = 绿色
• 测试 = 紫色

窗口边框一瞟就知道自己在哪个项目，再也不会手滑删库跑路。

5. Better Comments

平时写注释都长一个样，密密麻麻一坨，回头再看根本找不到重点。

Better Comments 让注释按规则高亮：

• // ! 红色 → 警告
• // ? 绿色 → 疑问
• // * 蓝色 → 高亮
• // TODO 橙色 → 待办

看代码就像刷弹幕，关键点一眼就能抓到。

6. Todo Tree

写代码随手加了个 // TODO: 优化这里，结果过了仨月上线才想起来，血压飙升。

有了 Todo Tree，所有 TODO 会自动收集到侧边栏，点击就能跳转到对应位置。 搞代码债管理比 Jira 还爽，清完还能勾掉，满足感直接拉满。

7. Smart IME

程序员最大痛点之一：输入法总切来切去。 在代码里敲中文注释 → 忘切 → var name = 张三 提交上去了，社死现场。

Smart IME 会自动帮你切换输入法：

• 光标在注释/字符串里 → 中文
• 光标回到代码区 → 英文

你只管敲字，输入法状态插件帮你兜底。

8. Error Lens

平时写代码，报错要么缩在底部的小角标，要么得等你鼠标移上去。 Error Lens 把错误和警告直接显示在行内，还能高亮，醒目到不可能忽略。

尤其新手常常漏看报错，有了它，代码写到哪错到哪，修 bug 就像开导航。

9. Live Server

做前端的小伙伴肯定爱死这个插件。 装上之后，右下角点「Go Live」，静态页面秒开本地服务器，保存就自动刷新。

甚至在同一 WiFi 下，手机也能直接访问，调响应式样式不要太方便。

10. REST Client

很多人习惯用 Postman 调接口，但有时候只是测几个 API，开个 Postman 太重了。

REST Client 允许你在 .http 文件里写请求，直接发送，结果展示在编辑器里。 完全替代 Postman 的轻量场景，非常适合新手练习 API 调试。

11. CodeSnap

写文章、写 PPT，截图代码总显得土。 用 CodeSnap 选中代码 → 自动生成带阴影、圆角的 PNG，美观又专业，发朋友圈都有人问你是不是用 PS 做的。

12. GitLens

新手写代码总有一个痛：这行是谁写的？为啥会这样？ GitLens 把每一行的提交人、时间、commit message 全部贴在代码边上。

想追溯 bug 的时候，不用翻命令行，直接「秒知道谁干的」。 同时还能可视化 commit 历史，非常适合团队协作。

13. Indent Rainbow

缩进错一格，调 bug 半天。 Indent Rainbow 给缩进层级染色，像彩虹一样，不同缩进用不同颜色，结构层次一眼明了。

写 Python、YAML 的同学，救命神器。

14. Bracket Pair Color DLW

括号太多看花眼？ 这个插件会给成对的括号上颜色，还能显示连线，复杂嵌套立刻清晰。

写 React JSX、写 JSON 配置都特别好用。

15. Auto Rename Tag

在 HTML 里改 <div> 标签名的时候，忘了改闭合标签，直接 GG。 这个插件能让你改开头标签时，闭合标签自动同步。

小功能但巨省心，新手 HTML 必备。

16. Path Intellisense

写 import 的时候，总记不住路径，手打又容易出错？ Path Intellisense 自动补全文件路径，按几下 Tab 就能搞定。

尤其是项目目录层级复杂时，节省超多时间。

17. Project Manager

同时维护多个项目时，频繁用「打开文件夹」太麻烦。 Project Manager 可以帮你收藏常用项目，一键切换，就像 IDE 自带的「项目管理器」。

新手学编程时可能有好几个 demo 项目，这玩意特别合适。

18. Bookmarks

大文件里定位函数太痛苦了。 Bookmarks 可以给关键行打书签，侧边栏快速跳转。

看源码、调试万行文件特别省事。

上面这些插件，不是那种「老生常谈的必装清单」，而是我自己长期使用下来，真觉得能让效率翻倍的神器：

• 调试神器：Console Ninja、Turbo Console Log、Quokka.js
• 界面优化：Peacock、Better Comments、Indent Rainbow、Bracket Pair Color
• 项目管理：Todo Tree、Project Manager、Bookmarks
• 前端专属：Live Server、Auto Rename Tag、Path Intellisense
• 协作必备：GitLens、Error Lens
• 提升逼格：CodeSnap、Smart IME

装完这一套，新手也能写得更顺、更快、更舒服。 不要小看这些小插件，很多时候，效率差距就是靠工具拉开的。

所以别犹豫了，打开扩展商店，挑几个你最需要的装上，感受一下什么叫「写代码也能像开挂」。