VS Code 扩展推荐指南

VS Code 不装插件就是个记事本，装太多就是个拖拉机。

这份指南帮你找到那个"刚刚好"的平衡点——只装真正提升效率的扩展，把花里胡哨的垃圾踢出去。装了 50 个插件的 VS Code 和没装的一样慢，你信不信？

---

#必装扩展 Top 5

不管你写前端还是后端，这五个不装等于白用 VS Code。

小提示：ESLint + Prettier 可能会打架，记得装 eslint-config-prettier 让 Prettier 接管格式化规则。

---

#AI 编程扩展对比

2025 年不用 AI 写代码，就像 2015 年不用 Google 查 bug 一样离谱。但选哪个？

#GitHub Copilot

• 优点：补全速度快、训练数据量大、和 VS Code 集成最深
• 缺点：收费（$10/月），隐私敏感项目要注意代码上传问题
• 适合：公司买了 license 的、日常开发主力工具

#Cline

• 优点：开源、支持 Claude/GPT/本地模型、Agent 模式能自动执行多步任务
• 缺点：消耗 token 比较猛，复杂任务偶尔翻车
• 适合：想用 Claude 写代码的、喜欢折腾 AI Agent 的

#Continue

• 优点：完全开源、支持本地模型（Ollama）、不上传代码
• 缺点：补全质量取决于你用的模型，本地小模型体验一般
• 适合：隐私要求高的、想用本地模型的

#Cursor（独立编辑器）

• 优点：AI 能力最强、Composer 模式直接改多个文件、理解项目上下文
• 缺点：不是 VS Code 扩展而是独立编辑器，收费 $20/月
• 适合：重度 AI 编程用户、愿意切换编辑器的

#我自己的体验

说实话，我自己目前主力用的是 Cline + Claude，体验确实比 Copilot 好一截，特别是处理复杂重构和跨文件改动的时候，Claude 的理解力明显更强。但 token 费确实也肉疼，有时候一个下午烧掉好几刀，心在滴血。Copilot 胜在便宜稳定，日常写写 CRUD 绰绰有余。

#建议

刚入门的同学直接上 GitHub Copilot，补全体验最丝滑，月费固定不用操心。想省钱或者想用 Claude 的，试试 Cline。对隐私有要求的，用 Continue + Ollama。预算充足且 AI 编程是你的主要工作方式，直接用 Cursor。

---

#前端开发套件

写前端不装这些，效率至少打五折。

#React 开发额外装

• ES7+ React/Redux/React-Native Snippets：rfc 一回车就生成函数组件模板，我每天至少用二三十次
• Pretty TypeScript Errors：把 TypeScript 那坨天书般的报错变成人话（没装之前看 TS 报错真的想砸键盘）

---

#后端开发套件

后端同学看这里。

#Node.js / NestJS 额外装

• NestJS Snippets：快速生成 Controller、Service、Module 模板
• npm Intellisense：import 的时候自动补全 npm 包名

---

#数据分析套件

搞数据的同学用 VS Code 也很香。

---

#效率神器

这些不分前后端，装了都好使。

#快捷键必会

别光装扩展，这几个快捷键不会等于白装 VS Code：

#Snippets 自定义

别只用扩展带的 snippets，自己定义几个高频模板：

Cmd + Shift + P → 输入 Configure User Snippets → 选语言 → 写你的模板。

比如写个快速 console.log：

json复制
{
  "Quick Log": {
    "prefix": "clog",
    "body": "console.log('$1:', $1);",
    "description": "快速 console.log"
  }
}

#Workspace Settings

项目根目录放一个 .vscode/settings.json，团队统一编辑器行为：

json复制
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "files.trimTrailingWhitespace": true
}

---

#千万别装的扩展

认真的，这些要么过时了，要么跟别的冲突，要么是性能杀手。

#性能排查

觉得 VS Code 变慢了？打开命令面板输入 Developer: Show Running Extensions，按加载时间排序。超过 500ms 的扩展认真考虑要不要留。之前我的 VS Code 启动要 8 秒，排查完发现是一个早就不用的 Salesforce 扩展在后台疯狂加载，禁用之后秒开。

还可以用 --disable-extensions 参数启动 VS Code，确认是不是扩展导致的卡顿：

bash复制
code --disable-extensions

---

#团队统一配置方案

团队协作最烦的就是"在我电脑上好好的"。用 .vscode/extensions.json 统一推荐扩展，新成员 clone 项目后 VS Code 自动提示安装。

在项目根目录创建 .vscode/extensions.json：

json复制
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "eamodio.gitlens",
    "usernamehw.errorlens",
    "editorconfig.editorconfig",
    "bradlc.vscode-tailwindcss",
    "humao.rest-client"
  ],
  "unwantedRecommendations": [
    "hookyqr.beautify",
    "coenraads.bracket-pair-colorizer-2"
  ]
}

recommendations 里的扩展，VS Code 会在打开项目时弹窗提示安装。unwantedRecommendations 里的扩展，VS Code 不会推荐（适合屏蔽那些过时的）。

配合 .vscode/settings.json 一起提交到 Git，团队开发体验直接拉齐。

---

#相关资源

• Cursor 使用指南 — 如果你决定试试 Cursor，先看这篇
• 开发环境问题排查 — VS Code 装完扩展出问题了？看这里
• VS Code 扩展市场↗ — 官方扩展商店
• VS Code 快捷键速查（Mac）↗
• VS Code 快捷键速查（Windows）↗