首页 / 开发工具 / VS Code插件推荐与开发环境优化

VS Code插件推荐与开发环境优化:把启动、补全、调试一次调顺

Roxi
Roxi 加速器 — 稳定·快速·安全
全球节点覆盖,支持所有主流平台,一键连接无需配置。新用户免费试用。
立即体验 →

开场:OK so,先别乱装插件,我直接现场拆一套能跑的配置

⚙️STEP 1环境搭建📋STEP 2编码实现📊STEP 3测试验证🔧STEP 4部署上线

兄弟们,eccfy 开机!今天我们不讲虚的,直接做一套VS Code插件推荐与开发环境优化教程。我这边测试机是 MacBook M1 16G,项目是一个 12 万行 TypeScript + Node 服务。优化前:VS Code 冷启动约 6.8 秒,打开项目索引到可跳转约 18 秒;优化后:冷启动 3.1 秒,索引 7 秒左右。测量方式很简单:用系统秒表计时,并在命令面板执行 “Developer: Startup Performance” 看插件耗时。

接下来你跟着我做。先按 Ctrl/Command + Shift + P,输入 “Show Running Extensions”,看哪个插件启动超过 200ms。超过 500ms 的,先禁用,不要犹豫。很多人搜“VS Code插件下载”然后一口气装 40 个,结果不是电脑慢,是插件互相打架。

Chapter 1:必装插件清单,按场景装,不按心情装

Now watch this,我把屏幕分成三块:左边扩展市场,中间代码,右边终端。下面这套是我长期项目里保留的组合:

  • 通用效率:GitLens、Error Lens、Path Intellisense、Todo Tree。
  • 前端全栈:ESLint、Prettier、Tailwind CSS IntelliSense、Auto Rename Tag。
  • 后端开发:REST Client、Docker、Prisma、YAML、DotENV。
  • 远程开发:Remote - SSH、Dev Containers。搜“VS Code Remote SSH怎么用”的同学,重点看下一段。

Remote SSH 实操来了:先在本机生成密钥,再写 SSH 配置。

ssh-keygen -t ed25519 -C "dev@local"

ssh-copy-id user@your-server-ip

Host my-dev-server
HostName your-server-ip
User user
IdentityFile ~/.ssh/id_ed25519

然后 VS Code 左下角绿色按钮,选择 “Connect to Host”,点 my-dev-server。第一次会装 server 端组件,100Mbps 网络下我实测约 40-70 秒。免费、官方、内置方案已经够用,限制是弱网下首次连接慢,文件监听在超大仓库里会有延迟。

Chapter 2:settings.json 直接抄,补全、保存、格式化一次调顺

方案A92方案B85方案C78方案D71方案E65

接下来是前后对比最明显的地方。打开 settings.json,把下面这段贴进去。注意:如果你团队已有规范,以团队配置为准。

{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
"editor.minimap.enabled": false,
"editor.suggestSelection": "first",
"files.watcherExclude": {
"**/node_modules/**": true,
"**/.git/objects/**": true,
"**/dist/**": true,
"**/.next/**": true
},
"search.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/.next": true
},
"typescript.tsserver.maxTsServerMemory": 4096,
"terminal.integrated.defaultProfile.osx": "zsh"
}

这一段解决三个高频痛点:保存自动修复 ESLint、减少无意义文件监听、给 TypeScript 语言服务更多内存。搜“VS Code格式化保存怎么设置”的,核心就是 formatOnSave + ESLint codeActionsOnSave。Windows 用户把 terminal 那行改成 PowerShell 或 Git Bash 即可。

再来一个现场测速:我在项目根目录执行 code --status,看 Extension Host CPU。如果空闲状态还长期 20% 以上,基本就是某个插件在扫文件。处理顺序:禁用最近安装插件、排除 dist/node_modules、重启 TS Server。

Chapter 3:怎么验证优化真的生效?别凭感觉,看数据

最后,给你一个可复制验证清单。第一,命令面板运行 “Developer: Startup Performance”,记录启动耗时,目标是常用项目低于 4 秒。第二,运行 “Show Running Extensions”,单插件启动最好低于 200ms。第三,打开一个 TS 文件,按 F12 跳转定义,3 秒内响应算健康。第四,终端执行:

code --status

看 CPU、内存、Extension Host 是否异常。第五,故意写一个 ESLint 错误,保存后应自动修复;再改一个接口请求,用 REST Client 发起测试,确认开发闭环可用。

如果你经常需要访问国外插件文档、GitHub Release 或搜索“油管怎么看”“翻墙软件”“免费VPN”这类网络问题,优先用官方镜像、公司代理或自建方案;付费工具只是备选,比如 Roxi 可在需要时了解:wizzegroup.com。OK,今天这套配置你照着做,评论区把你的启动耗时打出来,我们下期继续实测!

延伸阅读