vscode保存格式化卡顿主因是配置不当:eslint与prettier串行冲突、全量解析大文件、误格式化node_modules/dist、.prettierignore未生效、全局prettier查找耗时、文件监听负担过重。

VSCode 保存时格式化卡顿,基本不是 Prettier 本身慢,而是它被放在了错误的执行路径上——比如和 ESLint 串行打架、反复解析整个文件、或者对 node_modules 里的 bundle.js 也硬要格式化一把。
检查 formatOnSave 是否触发了多个格式化器
VSCode 会在保存时依次调用所有启用的格式化提供者,一旦同时开了 eslint.format.enable 和 prettier,它们可能串行执行,形成阻塞链。
- 运行命令面板(
Ctrl+Shift+P),输入Format Document With,看列出几个提供者 - 在
settings.json中显式关闭 ESLint 的自动格式化:"eslint.format.enable": false - 保留 ESLint 的 lint 功能(如保存前检查),但把修复交给 Prettier 或手动触发
- 确认
editor.defaultFormatter只设为"esbenp.prettier-vscode",避免歧义
确保 .prettierignore 生效且路径正确
.prettierignore 不是“写完就生效”的配置文件,它必须被 VSCode 正确读取,否则格式化仍会扫描那些大目录。
- 文件必须放在项目根目录(即
package.json所在层),不能放在子目录或工作区外 - 在
.vscode/settings.json中显式声明路径:"prettier.ignorePath": ".prettierignore" - 内容示例要覆盖高频干扰项:
node_modules/、dist/、build/、*.min.js、coverage/ - 同步配置
files.watcherExclude,否则 VSCode 仍在后台监听这些目录,徒增 CPU 负担
强制使用本地 Prettier 并禁用全局解析
插件默认会 fallback 到全局安装的 Prettier,而跨 Node 版本查找模块、兼容性判断、甚至 require 加载都会拖慢首次格式化速度。
- 项目内必须安装:
npm install --save-dev prettier(或yarn add -D prettier) - 在
.vscode/settings.json中关闭全局查找:"prettier.resolveGlobalModules": false - 顺手关掉 EditorConfig 支持:
"prettier.useEditorConfig": false,避免多一层配置解析开销 - 验证是否生效:打开一个 JS 文件,右键 →
Format Document With→ 看底部状态栏是否显示 “Prettier (local)”
改用 modifications 模式而非 file 模式
editor.formatOnSaveMode 默认是 file,意味着每次保存都全量解析整份文档。对 >1000 行的文件,这会明显卡顿。
- 改为
"editor.formatOnSaveMode": "modifications",只格式化你实际修改过的行块 - 该模式依赖语言服务器支持,JavaScript/TypeScript/JSON 等主流语言均可用
- 配合
prettier.requireConfig: true使用更稳妥,避免无配置时 fallback 到内置规则引发意外解析 - 注意:该模式不适用于粘贴后自动格式化等非保存场景
真正卡住你的往往不是 Prettier 本身,而是它被夹在 ESLint、全局模块查找、无效 ignore 规则和全量解析之间反复拉扯。每一步配置都要验证是否生效,而不是“写了就以为对了”。











