VSCode保存自动格式化需同时满足三项配置:全局和语言级“editor.formatOnSave”为true,且语言块中“editor.defaultFormatter”设为“esbenp.prettier-vscode”。

VSCode保存时自动格式化不生效?检查这三项配置
不是插件没装,而是 VSCode 默认关掉了保存时格式化的总开关。必须同时满足三个条件:全局启用、语言绑定开启、Prettier 设为默认格式化工具。
-
"editor.formatOnSave"必须设为true(在设置 JSON 或 GUI 中搜 “format on save”) - 对应语言(如
javascript)的"[javascript]"块里要有"editor.formatOnSave": true(优先级更高,会覆盖全局) -
"editor.defaultFormatter"在语言块中必须指定为"esbenp.prettier-vscode",不能留空或指向其他 formatter
Prettier 配置文件(.prettierrc)被忽略?路径和格式要严格匹配
VSCode 的 Prettier 插件只认特定名称和位置的配置文件,且不支持 JS 导出语法。写错一个字母或放错一层目录,就等于没配。
- 接受的文件名只有:
.prettierrc、.prettierrc.json、.prettierrc.yaml、.prettierrc.yml、prettier.config.js(注意:仅支持module.exports = {...},不支持 ES module) - 文件必须放在项目根目录(即打开的文件夹最外层),子目录里的
.prettierrc不会被识别 - 如果用了
prettier.config.js,开头不能有import或export default,否则插件加载失败,控制台报错Cannot use import statement outside a module
保存后代码反而变丑了?可能是 ESLint 和 Prettier 冲突
ESLint 自带格式规则(比如 semi、quotes)和 Prettier 重叠,两者同时运行又没协调,就会互相覆盖。典型表现是分号一会儿有、一会儿没。
- 不要同时开启 ESLint 的自动修复(
eslint.codeAction.onSave.fix)和 Prettier 的保存格式化,二选一 - 更稳妥的做法:用
eslint-config-prettier关掉 ESLint 所有格式类规则,只保留代码质量检查,让 Prettier 专注格式 - 确认
eslint.enable是true,且eslint.packageManager指向正确的包管理器("npm"/"yarn"/"pnpm"),否则 ESLint 根本不加载配置
TypeScript 文件不格式化?检查语言标识和插件依赖
VSCode 有时把 .ts 文件识别成 typescriptreact(比如在 Next.js 项目里),而你的 Prettier 配置只绑定了 typescript,就会漏掉。
- 右下角状态栏点语言模式,确认当前是
TypeScript而非TypeScript React;如果是后者,需在设置中加"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - Prettier 官方不原生支持 TypeScript 类型语法,必须确保已安装
@prettier/plugin-typescript,并在.prettierrc里通过"plugins"字段显式引入 - 如果用了
prettier.config.js,插件路径必须写对:require("@prettier/plugin-typescript"),不能只写字符串"@prettier/plugin-typescript"


















