我使用 VS Code 已经大约三年了。刚开始时，我安装了网上各种推荐文章里提到的所有扩展——几个月后，我意识到其中大部分我根本没怎么用过。有些甚至明显拖慢了编辑器的速度。

这个列表与众不同。这里的每个扩展都经历了：我安装使用、我卸载、然后我又重新安装——因为发现确实离不开它。如果过了一年我还在用，就说明它值得入选。

#提升代码质量

ESLint 是我在任何开发环境中第一个安装的扩展。这不是因为必须，而是因为在一长串代码中找 bug 远比在打字时看到红线提示要痛苦得多。ESLint 会读取项目中的 .eslintrc 配置文件并立即响应——无需等待构建过程或 CI 就能知道哪里出了问题。

Error Lens 是 ESLint 的自然搭档。它的独特之处在于：不把错误信息隐藏在需要手动打开的面板底部，而是直接显示在有问题的代码行末尾。听起来很简单，但请相信——一旦习惯，你就再也不想回到原来的方式。

SonarLint 在比 ESLint 更深的层次上工作。它不仅检查代码风格，还寻找可能绕过常规 lint 检查的潜在 bug 和安全漏洞。我曾经发现过一个 ESLint 没能捕获的潜在空指针解引用问题，正是 SonarLint 在上线前把它找了出来。

#提升日常效率

Auto Rename Tag 听起来像是一个不起眼的小扩展。我以前也这么想，直到某次因为版本冲突在没有它的情况下工作了一周。当你修改 HTML 或 JSX 的开始标签时，结束标签会自动同步修改。就这么简单——但每次改标签名时无需滚动到页面底部所节省的时间是实实在在的。

Path Intellisense 让我告别了每次要数该写几个 ../ 才能回到正确文件夹的烦恼。这个扩展会在你输入时自动补全文件路径，并且它了解你项目的文件夹结构。

Import Cost 会在 import 语句旁边直接显示你引入的每个包的大小。这改变了我选择依赖项的方式。与其先安装再纠结于它的大小，现在我可以立刻知道想用的库体积是否合理。

Turbo Console Log 可以自动化编写信息丰富的 console.log。选中变量，按下快捷键，扩展就会生成包含变量名和上下文信息的格式化日志。在快速调试时，这能节省大量时间。

GitLens 改变了我理解代码历史的方式。每一行代码我都能直接看到是谁写的、什么时候写的、在哪个提交中——无需打开终端或 GitHub。在处理年代久远的代码库时，想了解那些奇怪决策背后的上下文，这个功能非常有用。

#针对我所用的框架

Vue - Official 是任何使用 Vue 或 Nuxt 开发者的必备扩展。它由 Vue 团队直接维护，为单文件组件提供语法高亮、类型检查和 IntelliSense。没有它，在 VS Code 中编写 Vue 的体验会差很多。

Tailwind CSS IntelliSense 在使用 Tailwind 的项目中极其宝贵。类名自动补全、悬停时颜色预览、以及验证你写的类名是否真实存在——这些功能一应俱全。使用之前，我经常写错类名，直到在浏览器里检查时才发现。

#让界面更清晰

Indent Rainbow 用不同的颜色为每一级缩进上色。这在处理深层嵌套的 HTML 模板或有很多嵌套元素的组件时非常有帮助。你的眼睛能立刻知道自己处在哪一层级，而无需去数空格。

Color Highlight 会直接在 CSS 代码中的 hex、rgb 或 hsl 值旁边显示颜色预览。无需切换到浏览器就能确认写的颜色是否正确。

Peacock 是一个经常被忽视但非常实用的扩展，尤其适合习惯同时打开多个 VS Code 窗口的人。你可以为每个项目设置不同的颜色，这样一眼就能区分哪个是前端、哪个是后端、哪个是 A 客户的项目、哪个是 B 客户的项目。

#这一个比较特别

REST Client 让你可以直接在 VS Code 中的 .http 文件里编写和发送 HTTP 请求。无需打开 Postman 或 Insomnia。这个扩展的特别之处在于，你写的请求可以随代码一起提交到 Git，这样整个团队都能访问同样的请求集合，无需同步外部工具。

---

一个重要提示：这些扩展不需要全部一次性安装。每个扩展都会给编辑器增加一点负担，如果安装太多，VS Code 可能会变慢，尤其是在大型项目中。请根据你当前使用的技术栈安装确实需要的扩展，并定期评估是否还在使用它们。