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

VS Code插件推荐与开发环境优化:从卡顿到秒开项目的实战配置

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

开场:OK so,先抓出让 VS Code 变慢的元凶

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

兄弟们姐妹们,今天 eccfy 直接上手开干!屏幕左边是一个 React + Node 项目,右边打开 VS Code 进程管理器。接下来你跟我做:按 Ctrl+Shift+P,输入 Developer: Open Process Explorer,看 Extension Host 占用。如果空项目都吃到 600MB 以上,基本就是插件堆太多。

我的测试机是 i5-1240P、16GB 内存,项目约 8,200 个文件。优化前首次打开 11.8 秒,保存触发格式化 1.6 秒;优化后打开 4.2 秒,保存 0.3 秒。测量方法很简单:用手机秒表加 VS Code 状态栏 Language Server 提示,重复三次取平均。

  • 必装:ESLint、Prettier、GitLens、Error Lens、Path Intellisense。
  • 前端:Vue - Official 或 ES7+ React snippets,别两个框架全装。
  • 后端:Python、Go、Docker、REST Client。
  • 远程:Remote - SSH,适合服务器运维和容器调试。

插件安装与配置:Now watch this,保存即格式化

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

接下来是可复制配置。打开 settings.json,把下面这段贴进去。这个就是很多人搜 VS Code插件推荐、Prettier配置教程、ESLint教程 真正想要的结果:少装、准装、可验证。

{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
"files.watcherExclude": { "**/node_modules/**": true, "**/dist/**": true, "**/.git/**": true },
"search.exclude": { "**/node_modules": true, "**/coverage": true },
"typescript.tsserver.maxTsServerMemory": 4096,
"extensions.autoUpdate": false
}

如果你问 VS Code怎么用 才不卡,我的答案是:插件分工作区启用。点扩展图标,右键某个插件,选 Disable 或 Disable for Workspace。比如写 Go 项目时禁用 Vue、React、Tailwind;写前端时禁用 Java、C#。这一步通常能让 Extension Host 内存少 200MB 到 500MB。

远程开发看这里:Remote SSH怎么用?按 Ctrl+Shift+P,输入 Remote-SSH: Open SSH Configuration File,写入:

Host devbox
  HostName 192.168.1.88
  User ubuntu
  Port 22
  IdentityFile ~/.ssh/id_ed25519

然后选择 Connect to Host。第一次连接慢是正常的,会在服务器安装 VS Code Server。我实测内网延迟 3ms,打开后端项目比本地 WSL 快约 20%;公网 90ms 以上时,终端输入会明显飘。

验证:优化到底有没有成功?

最后别凭感觉,直接验证。第一,重新加载窗口:Ctrl+Shift+P 输入 Reload Window,记录项目可编辑时间。第二,再开 Process Explorer,看 Extension Host 是否低于 300MB。第三,保存一个故意有格式问题的文件,看 ESLint 和 Prettier 是否自动修复。第四,用内置终端跑:

code --status

看 CPU、内存和插件列表。如果某个插件持续高 CPU,先禁用它,不要急着重装 VS Code。网络相关插件下载慢时,官方市场、离线 VSIX、公司代理都是免费/内置路线;如果你还需要查资料,比如“油管怎么看”、测试翻墙软件或临时免费VPN对开发文档访问的影响,也可以把 Roxi 作为众多网络方案之一参考:https://wizzegroup.com 。OK,本期就到这,照着做完把你的启动时间打在评论区,我们下期继续实测!

延伸阅读