VSCode前端格式化保存慢的根源是多格式化插件冲突导致降级重试，需确保语言模式为TypeScript React、.prettierrc配置parser为typescript、.vscode/settings.json中精准绑定[typescriptreact]默认格式化器并禁用ESLint格式能力。
VSCode前端格式化保存慢，基本不是网络或硬盘问题，而是多个格式化插件在抢着处理同一份 .tsx 或 .jsx 文件，导致反复解析、降级重试、甚至串行执行。
为什么 Shift+Alt+F 一按就卡住 2 秒？
这不是快捷键延迟，是 VSCode 在尝试把文件交给不同格式化器失败后不断 fallback。比如：
-
.tsx文件被误识别为typescript模式（而非typescriptreact），结果先扔给 ESLint → 解析失败 → 再扔给旧版 Prettier（没配"parser": "typescript"）→ 又失败 → 最后才轮到正确配置的 Prettier - 同时启用
esbenp.prettier-vscode和dbaeumer.vscode-eslint，且都开启了"eslint.format.enable": true，保存时两个插件各自跑一遍，耗时翻倍 -
prettier配置里漏了"htmlWhitespaceSensitivity": "ignore"，遇到 JSX 就报Cannot parse file: Unexpected token，触发重试逻辑
怎么确认是不是格式化插件在打架？
打开命令面板（Ctrl+Shift+P），输入并运行 Format Document With，观察弹出列表：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 如果看到多个选项（如 “Prettier”、“ESLint”、“TypeScript and JavaScript Language Features”），说明冲突已存在
- 如果只显示一个，但右下角语言模式是
TypeScript而不是TypeScript React，那格式化器根本没被激活 - 运行
Developer: Toggle Developer Tools，在 Console 里搜Conflict detected或Extension X contributed command formatDocument but it's already registered
必须做的三步配置（缺一不可）
仅改全局 editor.defaultFormatter 没用，前端格式化必须语言级绑定：
立即学习“前端免费学习笔记（深入）”；
- 确保右下角状态栏显示的是
TypeScript React（不是TypeScript），可通过点击切换 - 项目根目录加
.prettierrc，内容至少含：{ "parser": "typescript", "jsxBracketSameLine": false, "htmlWhitespaceSensitivity": "ignore" } -
.vscode/settings.json中写死语言块：{ "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }, "eslint.format.enable": false }
容易被忽略的性能陷阱
很多团队配好了 Prettier，但保存还是慢，问题常藏在这几个地方：
-
typescript.tsserver.maxTsServerMemory默认值太小（通常 3072），大项目 + TSX 全量解析直接爆内存，建议设为8192 - 没关
editor.codeActionsOnSave，它会和格式化并发执行，尤其"source.fixAll"在大型组件里可能触发整树重分析 -
prettier插件版本低于 v3.0，对局部格式化（Ctrl+K Ctrl+F）支持不稳，选中 JSX 后缩进错乱其实是 fallback 到了内置格式器 - 工作区里存在未被
.prettierignore排除的dist/或build/目录，TS Server 仍在扫描这些文件
