VSCode插件应按实际编码痛点精准安装：HTML/CSS缺class补全装HTML CSS Support，Vue语法无提示装Volar，路径不确定用Path Intellisense，TODO管理用Todo Tree；装后须实测验证，无效即卸载。
VSCode 装完不装插件，等于只用了 30% 的能力——但盲目安装几十个插件，反而卡顿、冲突、功能失效。真正关键的是：按需装、装对、装稳。
怎么快速识别该装哪个插件？
别从“别人推荐列表”开始，先看自己正在写的代码类型和当前卡点：
- 写 HTML/CSS 时总要手动输
class="xxx"，且找不到对应样式文件 → 需要HTML CSS Support - Vue 文件里
<script setup>语法没提示、跳转失败 → 必须装Volar（不是 Vetur） - 导入路径写到一半，不确定
../../utils/request.ts对不对 →Path Intellisense能实时补全 - 项目里满屏
// TODO:，但根本记不住哪些没做 →Todo Tree自动聚合成侧边栏列表
插件不是越多越好，而是每个都解决一个具体痛点。装完一个，立刻试一次真实场景（比如在 .vue 文件里按 Ctrl+Space 看有没有组件名提示），无效就卸载。
vscode-icons 装了没反应？检查这三处
vscode-icons 是最常“装了却看不到效果”的插件，问题几乎都出在主题链路上：
- 安装后没启用图标主题：按
Ctrl+,打开设置，搜Icons Theme，下拉选中VSCode Icons（不是默认的Minimal或空） - 文件夹图标被其他插件覆盖：禁用
Material Icon Theme或类似图标插件，二者冲突 - 某些文件类型未识别（比如
.env.local）：右键文件 →Change Language Mode→ 手动设为Environment，图标才会生效
它不改代码逻辑，只改视觉效率。如果文件树还是密密麻麻一堆白色文档图标，说明链路断了，不是插件坏了。
Prettier 和 ESLint 同时装，为什么格式化后报错？
这不是 bug，是规则打架——Prettier 负责把代码弄整齐（比如统一单引号、删末尾逗号），ESLint 负责语法合规（比如禁止 console.log）。两者默认规则有重叠，比如都管“引号类型”，结果 Prettier 格式化完，ESLint 立刻标红。
- 必须装
eslint-config-prettier：它是个“消音器”，关掉 ESLint 里所有和 Prettier 冲突的规则 - 配置里加一行：
"extends": ["eslint:recommended", "prettier"]，顺序不能反 - VSCode 设置里关掉
editor.formatOnSave如果你用 ESLint 自动修复，否则两个格式化器会互相覆盖
真正起效的标志：保存文件后，只有 ESLint 提示语法问题，不再因格式问题报错。
Debugger for Chrome 断点不命中？别怪插件
这个插件本身不运行代码，它只是把 VSCode 的断点“转发”给 Chrome。断点失效，90% 是映射没对上：
- 确认 Chrome 已打开 DevTools（F12），且 Network 标签页里能看到
localhost:3000这类地址 - VSCode 的
launch.json里url必须和实际访问地址一致（比如开发服务器是http://localhost:5173，就不能写http://127.0.0.1:5173） - Chrome 地址栏右上角出现
VS Code小图标，才是连接成功；没图标说明调试协议没通
它依赖浏览器环境和本地服务完全匹配，不是装完就能用。第一次调试前，先确保你能用 Chrome 正常访问页面，再点 VSCode 的绿色 ▶️ 按钮。
插件不是魔法开关，是工具链里的一环。最容易被忽略的，其实是“装完是否真解决了那个具体问题”——而不是看下载量或星级。卡住时，回退一步：我刚才想解决什么？现在它做到了吗？没做到，是哪一环断了？
