VSCode 必备插件清单：这15款我用了就再也回不去了

写在前面
VSCode 之所以能成为最受欢迎的编辑器，靠的就是庞大的插件生态。但插件不是越多越好——装多了卡顿、冲突、启动慢，反而拖累效率。
这篇按场景分类整理了15款真正值得装的插件，每款都说明解决了什么问题、怎么配置，帮你精准安装，不装一个废的。
一、主题美化——让编码心情变好

1. One Dark Pro
   VSCode 下载量最高的主题之一，Atom 风格的暗色主题，语法高亮清晰，关键字、变量、函数、注释区分明显，长时间编码不刺眼。
   推荐搭配：字体用 Fira Code（支持连字，=> 显示为 →，!= 显示为 ≠）。
2. Material Icon Theme
   给不同类型的文件配上直观的图标——.js 是黄色、.vue 是绿色、.json 是灰色，一眼识别文件类型，不用看后缀名找文件，文件树清晰度提升50%。
   

二、代码质量——写出可维护的代码
3. Prettier - Code formatter
代码格式化工具，支持 JavaScript、TypeScript、HTML、CSS、JSON 等20+种语言。保存文件时自动格式化，统一缩进、引号、换行，团队协作时告别代码风格争论。
推荐配置（settings.json） ：
json

{
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.printWidth": 100,
"prettier.trailingComma": "es5"
}
⚠ 避坑：如果同时装了 ESLint，可能产生规则冲突。安装 eslint-config-prettier 可以禁用 ESLint 中与 Prettier 重复的规则。
4. ESLint
实时检测 JavaScript/TypeScript 代码中的语法错误、未定义变量、风格问题，并且能自动修复大部分问题。配合项目中的 .eslintrc 配置文件，可以统一团队代码风格。
与 Prettier 的分工：ESLint 管语法质量，Prettier 管排版格式，各司其职。
5. Error Lens
默认情况下，VSCode 的错误提示藏在代码底部的小红波浪线下，等你鼠标移上去才能看到。Error Lens 直接把错误和警告信息显示在代码行末尾，醒目到不可能忽略。
大规模重构、升级依赖、TypeScript 严格模式迁移时，它就是你的安全网。
6. Code Spell Checker
检查变量名、注释、字符串中的英文拼写错误。比如把 receive 写成 recieve、把 success 写成 sucess——这类错误很可能导致 API 调用失败，排查起来却极其耗时。
配置技术词典（加入项目专属词汇）：
json
{
"cSpell.words": ["kubernetes", "postgresql", "middleware"]
}

三、效率神器——让编码如飞
7. Path Intellisense
输入 ./ 或 ../ 时自动提示目录下的文件路径。再也不用手动敲 ../../components/Button/index.tsx 这种长路径，按 Tab 就补全。
8. GitLens — Git supercharged
VSCode 最强大的 Git 增强插件。鼠标悬停在代码行上，直接显示这行代码是谁写的、什么时候写的、提交信息是什么——定位 bug 责任人、理解代码历史的神器。
还支持可视化提交记录、分支对比、冲突解决，功能非常齐全。
9. Todo Tree
写代码时随手加的 // TODO: 优化这里，过了三个月早就忘了。Todo Tree 会自动收集项目中所有 TODO、FIXME 注释，在侧边栏生成任务树，点击即可跳转。
管理技术债务，比 Jira 还爽。
10. Bookmarks
在 10 万行代码的大项目中跳转定位非常痛苦。Bookmarks 可以给关键函数/代码行打书签，快捷键 Ctrl+Shift+K 添加，Ctrl+Alt+K 查看所有书签列表，快速穿梭于核心逻辑之间。

四、语言与框架支持——按技术栈选装
11. Tailwind CSS IntelliSense
Tailwind CSS 专属智能提示。不用死记 flex-col、bg-blue-500 这些海量类名，输入时自动补全，hover 还能预览颜色/间距的 px 值。
安装量 1600万+ ，Tailwind 用户必装。
12. Volar（Vue 3 项目） / Vetur（Vue 2 项目）
• Volar：Vue 3 官方推荐，对