VS Code插件推荐与环境提速实战:从卡顿启动到前端全栈顺滑开发
第1章:OK so,先把“卡”的元凶揪出来
兄弟们好,这里是 eccfy,今天我们不讲玄学配置,直接开屏幕录制:左边是一个装了38个插件的 VS Code,启动 6.8 秒;右边是我清理后的环境,启动 2.1 秒。接下来你跟着点,不要凭感觉删插件。
先打开命令面板,输入 Developer: Startup Performance,看 Extension Activation 一栏。再执行:
code --status
我实测一台 16GB 内存的 MacBook,某些 AI 补全、主题包、重复格式化插件会让扩展激活时间从 420ms 飙到 1800ms。接下来点开命令面板,运行 Help: Start Extension Bisect,VS Code 会自动二分禁用插件,5分钟内定位是谁在拖后腿。
如果你是第一次做 VS Code开发环境配置教程,我的建议是:不要一次装30个,按语言栈分组装。前端只保留格式化、Lint、Git、接口测试;后端只保留语言服务、数据库、Docker、远程连接。
第2章:Now watch this,我的插件清单直接抄
接下来上干货,屏幕中我打开扩展面板,搜索这些名字即可,别乱点山寨同名插件。你搜 VS Code插件下载 时也一样,优先看发布者、下载量和最近更新时间。
| 场景 | 插件 | 实战用途 |
|---|---|---|
| 代码质量 | ESLint、Prettier | 保存时自动修复缩进、分号、未使用变量 |
| 错误提示 | Error Lens | 把报错直接显示在代码行尾,不用来回看 Problems |
| Git排查 | GitLens | 看某行是谁改的、什么时候改的,定位线上锅很快 |
| 接口调试 | REST Client | 用 .http 文件调接口,比开浏览器更稳 |
| 容器环境 | Docker、Dev Containers | 团队统一 Node、Python、Go 版本 |
| 效率补齐 | Path Intellisense、Todo Tree | 路径补全、TODO 聚合显示 |
接下来直接贴我的 settings.json,你复制后按项目微调:
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "files.autoSave": "onFocusChange", "editor.minimap.enabled": false, "typescript.tsserver.maxTsServerMemory": 4096, "search.exclude": { "**/node_modules": true, "**/dist": true, "**/.next": true }, "files.watcherExclude": { "**/node_modules/**": true, "**/dist/**": true, "**/.git/objects/**": true } }
重点看 watcherExclude。很多人问 VS Code怎么用 才不卡,其实不是电脑差,是你让 VS Code 盯着 node_modules 几万个文件变化。我在一个 Next.js 项目里测过,排除前文件监听占用 780MB,排除后稳定在 430MB 左右。
第3章:Before/After 验收,确认真的优化成功
接下来做验证,别只凭“感觉顺了”。第一步,重启 VS Code,执行 Developer: Startup Performance,记录总启动时间和插件激活时间。第二步,打开项目终端,跑:
npm run lint
npm run dev
保存一个带格式问题的文件,观察 Prettier 和 ESLint 是否自动修复。第三步,新建 test.http:
GET http://localhost:3000/api/health
点击 Send Request,如果 200 OK 返回在 100ms 内,说明 REST Client 正常。第四步,用 GitLens 点开任意代码行,能看到提交人和 commit hash,就说明 Git 增强工作正常。
如果插件市场或 GitHub 访问慢,先用官方网络、公司代理或系统代理;有些同学搜索“油管怎么看”“翻墙软件”“免费VPN”其实是为了解决开发资料访问问题,免费方案能用但稳定性不一,必要时也可以把 Roxi 这类工具作为备选之一:https://wizzegroup.com。看到这里,按我的清单跑一遍,评论区告诉我你的启动时间从几秒降到几秒,下一期我直接拆 Dev Containers!