gitlens、eslint、prettier在大型js项目中易因默认行为冲突导致cpu飙升、假警告和格式化死循环;需通过.vscode/settings.json显式约束作用域,并在多根工作区下为各子包独立配置路径映射、eslint解析器及gitlens范围,配合ripgrep排除node_modules等目录方可真正提效。

VSCode 插件本身不能“管理”大型 JS 代码库——真正起效的是插件与编辑器原生能力、项目配置、工作区结构的协同。单靠装一堆插件反而容易拖慢响应、触发冲突、掩盖真实问题。
为什么 GitLens + ESLint + Prettier 组合最容易出问题
这三个插件在大型 JS 项目中高频共存,但默认行为常互相干扰:
-
GitLens默认启用行级 blame 和 hover 提示,对含数千行的utils.js或生成文件(如dist/)会持续扫描 Git 历史,CPU 占用飙升 -
ESLint若未配置eslint.validate仅限javascript和javascriptreact,可能误检 JSON、Markdown 或构建脚本,产生大量假警告 -
Prettier在保存时自动格式化,若项目同时存在.eslintrc.js和.prettierrc但未启用eslint-config-prettier,会出现“格式化后 ESLint 报错 → 修复后又触发格式化”的死循环
实操建议:在项目根目录的 .vscode/settings.json 中显式约束作用域:
{
"gitlens.advanced.blame.ignoreScopes": ["json", "markdown", "shellscript"],
"eslint.validate": ["javascript", "javascriptreact"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
多根工作区下插件行为必须手动隔离
当你把 packages/core 和 apps/web 同时加入一个 .code-workspace,ESLint 不会自动识别“这个文件属于哪个子包”。它只认当前打开文件的路径和 nearest .eslintrc,而不会跨根继承配置。
常见错误现象:apps/web/src/App.jsx 里用了 import { foo } from 'core-lib',跳转失败或类型报错,但 core-lib 明明就在同个工作区里。
原因不是插件没装,而是:
- 缺少 TypeScript 的
baseUrl+paths配置,导致语言服务器无法解析别名 -
ESLint没启用import/resolver插件,不理解tsconfig.json中的路径映射 -
GitLens在多根下默认只跟踪第一个根的 Git 仓库,其他根的提交历史不可见
解决方法:每个子包根目录下放独立 .vscode/settings.json,并确保有:
{
"typescript.preferences.importModuleSpecifier": "relative",
"eslint.options": {
"overrideConfigFile": "./.eslintrc.js"
}
}
搜索卡顿?先关掉插件,换 ripgrep + 排除规则
大型 JS 项目里,90% 的“插件太慢”其实是搜索在扫 node_modules、dist、.next。插件如 Project Manager 或 Search Node Modules 反而加重负担。
直接用 VSCode 原生搜索提速更可靠:
- 安装
ripgrep(macOS/Linux 用brew install ripgrep,Windows 下载rg.exe并加进 PATH) - 在设置中开启
"search.useRipgrep": true和"search.followSymlinks": false - 搜索时手动加过滤:输入
useEffect -g "!node_modules/**" -g "!dist/**",-g是 ripgrep 的 glob 排除语法,比 UI 里的“排除文件”框真正生效
注意:GitLens 的“Search in Repositories”功能底层也走 ripgrep,但它默认不读你的 .gitignore;而原生搜索开启 search.useRipgrep 后会自动跳过 .gitignore 列出的路径。
插件推荐清单必须按子项目声明
不要在全局设置里开一堆插件,然后指望它们“智能适配”不同 JS 子项目。比如 backend/ 是 Node.js + Express,frontend/ 是 React + Vite,它们需要的 LSP 完全不同。
正确做法是在每个子项目根目录下建 .vscode/extensions.json:
{
"recommendations": [
"ms-vscode.vscode-typescript-next",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint"
]
}
再配合全局设置 "extensions.autoRecommend": false。否则 VSCode 可能在你打开 backend/ 时,静默启用 Volar(Vue 语言服务器),造成诊断进程冲突和内存泄漏。
真正影响体验的,从来不是插件数量,而是路径映射是否准确、搜索是否跳过无关目录、各子项目配置是否彼此隔离——这些细节一旦漏掉,再多插件也救不回卡顿和跳转失败。











