VS Code 扩展推荐指南
VS Code 不装插件就是个记事本，装太多就是个拖拉机。
这份指南帮你找到那个"刚刚好"的平衡点——只装真正提升效率的扩展，把花里胡哨的垃圾踢出去。装了 50 个插件的 VS Code 和没装的一样慢，你信不信？
#必装扩展 Top 5
不管你写前端还是后端，这五个不装等于白用 VS Code。
| # | 扩展 | 一句话理由 |
|---|---|---|
| 1 | ESLint | 没有它你的代码就是在裸奔，低级 bug 全靠肉眼找 |
| 2 | Prettier | 团队代码风格统一全靠它，别再为缩进吵架了 |
| 3 | GitLens | 想知道这行代码是谁写的、什么时候改的？一秒看到 |
| 4 | Error Lens | 报错信息直接显示在代码旁边，不用再去 Problems 面板翻来翻去 |
| 5 | EditorConfig for 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。
#前端开发套件
写前端不装这些，效率至少打五折。
| 扩展 | 干什么用 |
|---|---|
| Auto Rename Tag | 改 <div> 开标签，闭标签自动跟着变 |
| CSS Peek | 在 HTML 里按住 Ctrl 点 class 名，直接跳到 CSS 定义 |
| Tailwind CSS IntelliSense | Tailwind 类名自动补全 + 悬停预览实际样式 |
| styled-components | 写 styled-components 的语法高亮和智能补全 |
| SVG Preview | 直接在编辑器里预览 SVG 文件，不用切浏览器 |
| Import Cost | 在 import 语句旁边显示包的体积，打包体积心里有数 |
| Color Highlight | 颜色代码直接在编辑器里显示对应颜色 |
#React 开发额外装
- ES7+ React/Redux/React-Native Snippets：
rfc一回车就生成函数组件模板，我每天至少用二三十次 - Pretty TypeScript Errors：把 TypeScript 那坨天书般的报错变成人话（没装之前看 TS 报错真的想砸键盘）
#后端开发套件
后端同学看这里。
| 扩展 | 干什么用 |
|---|---|
| REST Client | 在 .http 文件里写请求，直接在编辑器里发，比 Postman 轻便得多 |
| Thunder Client | 更接近 Postman 的体验，有图形界面，适合不喜欢写 .http 文件的 |
| MongoDB for VS Code | 直接连 MongoDB 查数据，不用开 Compass |
| Docker | 管理容器、查看日志、进容器终端，全在 VS Code 里搞定 |
| DotENV | .env 文件语法高亮，别小看它，没高亮的时候找个错误配置能找半天 |
#Node.js / NestJS 额外装
- NestJS Snippets：快速生成 Controller、Service、Module 模板
- npm Intellisense：import 的时候自动补全 npm 包名
#数据分析套件
搞数据的同学用 VS Code 也很香。
| 扩展 | 干什么用 |
|---|---|
| Jupyter | 直接在 VS Code 里运行 Notebook，不用开浏览器 |
| Python | Python 语言支持、调试、虚拟环境管理 |
| Pylance | Python 类型检查和智能补全，比默认的快好几倍 |
| Rainbow CSV | CSV 文件按列用不同颜色显示，看数据不再眼花 |
| Data Wrangler | 微软出的数据预览工具，能直接在 VS Code 里看 DataFrame |
#效率神器
这些不分前后端，装了都好使。
#快捷键必会
别光装扩展，这几个快捷键不会等于白装 VS Code：
| 快捷键 (Mac) | 功能 |
|---|---|
Cmd + Shift + P | 命令面板，VS Code 的万能入口 |
Cmd + P | 快速打开文件，输文件名就行 |
Cmd + D | 选中下一个相同的词，批量改名神器 |
Option + Shift + ↓ | 复制当前行到下一行 |
Cmd + Shift + K | 删除整行 |
Cmd + / | 注释/取消注释 |
Cmd + B | 切换侧边栏显示 |
#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 }
#千万别装的扩展
认真的，这些要么过时了，要么跟别的冲突，要么是性能杀手。
| 扩展 | 为什么别装 |
|---|---|
| Beautify | 已经停止维护了，功能被 Prettier 完全替代 |
| Bracket Pair Colorizer | VS Code 1.67+ 内置了括号颜色匹配，装它纯属多余还拖慢速度 |
| Path Autocomplete | VS Code 内置的路径补全已经够用，这个反而会跟内置功能冲突 |
| Settings Sync（扩展版） | VS Code 内置了 Settings Sync（登录 GitHub/Microsoft 账号），第三方的别用了 |
| 各种 Theme 装一堆 | 主题装一个就够了，装十个不会让你变成十倍程序员 |
| HTML Snippets | Emmet 是 VS Code 内置的，功能完全覆盖这个扩展 |
#性能排查
觉得 VS Code 变慢了？打开命令面板输入 Developer: Show Running Extensions，按加载时间排序。超过 500ms 的扩展认真考虑要不要留。之前我的 VS Code 启动要 8 秒，排查完发现是一个早就不用的 Salesforce 扩展在后台疯狂加载，禁用之后秒开。
还可以用 --disable-extensions 参数启动 VS Code，确认是不是扩展导致的卡顿：
bashcode --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）↗
