从插件冗余到极致流畅：我的 Vue 3 开发环境“瘦身”实录

前言：为什么我们要给 VS Code 瘦身？

很多开发者（包括曾经的我）习惯看到好用的插件就点安装，结果 VS Code 逐渐变成了"内存吞噬者"，启动慢、搜文件卡、补全列表乱跳。

在 2026 年的今天，面对 Vue 3 + Vite + TypeScript 的快节奏开发，我们需要的是一套响应极快、分工明确的"精锐部队"。近期我对自己 20 多款插件进行了深度"断舍离"，只保留了这 16 款核心利器。

---

一、 核心引擎：Vue 3 准入配置

如果你在写 Vue 3，不要再装各种乱七八糟的自动导入和模板插件了。

1. Vue (Official) 原 Volar ：Vue 开发的"灵魂"。它不仅支持 Composition API，还内置了极其强大的 Auto Import。（所以，你可以放心地卸载独立的 Auto Import 插件了）。

2. Prettier - Code formatter ：强迫症福音。配合 formatOnSave，保证代码风格整齐划一。

3. Pretty TypeScript Errors：把那些晦涩难懂的 TS 报错变成人类能看懂的漂亮卡片，排错效率提升 300%。

---

二、 样式魔法：SCSS 与 CSS 的丝滑体验

1. SCSS IntelliSense ：SCSS 变量、Mixin 的自动补全。配合 Ctrl+Click 直接跳转到变量定义处，再也不用在茫茫样式文件中翻找颜色值。

2. CSS Peek：在 HTML 标签上直接预览或跳转到对应的 CSS 定义。

3. Image preview：在代码行号左侧直接显示图片缩略图，引入图片资源时一眼识破路径错误。

---

三、 交互增强：手速与视觉的极致平衡

1. Auto Rename Tag：修改起始标签，闭合标签同步变化。

2. Auto Close Tag ：打完 <div> 自动补全 </div>。

3. Error Lens：报错信息直接显示在代码行末，省去了鼠标悬停查看的零点几秒，非常解压。

4. Better Comments：用不同的颜色标注注释。

   • // ! 警告

   • // TODO 待办

   • // ? 疑问 让代码结构像书签一样清晰。

---

四、 调试与溯源：专业开发的自我修养

1. Console Ninja ：本场最佳。 它直接在编辑器代码行内显示 console.log 的输出结果，再也不用频繁切换浏览器 F12。

2. GitLens --- Git supercharged ：每一行代码都有"前世今生"。一眼看出哪行代码是谁写的、什么时候写的、为了什么需求写的。交接项目时的防甩锅利器。

3. Import Cost ：实时显示 import 库的大小。看到引入一个库要几百 KB 时，你会下意识思考是否需要按需引入。

---

五、 路径与依赖：告别 Module not found

1. Path Intellisense：路径补全。

2. npm Intellisense：引入第三方包时的自动联想。

---

总结：我的"断舍离"心得

在这次清理中，我卸载了重合的 Path Autocomplete，移除了已被集成的 Auto Import，并清理了完全不相关的后端语言（Java/PHP/Ruby）插件。

瘦身后的感觉： VS Code 启动像闪电一样快，补全列表干净利落，心智负担瞬间降低。

---

💡 给读者的小建议

你可以将这些配置存入项目的 .vscode/extensions.json，这样团队里的每个小伙伴都能一键拥有同款高效环境。

"工具是为了让我们专注于逻辑，而不是被配置困扰。" 希望这套清单能帮到正在优化的你！