prettier保存后无反应,是因为vscode未调用它:右下角不显示prettier说明格式化器未绑定;必须同时满足插件安装、editor.formatonsave为true且未被语言块覆盖、editor.defaultformatter显式设为"esbenp.prettier-vscode"三条件。

为什么保存后 Prettier 完全没反应
根本不是插件没装,而是 VSCode 根本没调用它——状态栏右下角不显示 Prettier,说明格式化器未绑定到当前语言。常见现象包括:Ctrl+S 后代码纹丝不动、Shift+Alt+F 手动触发也无响应、右下角显示 ESLint 或 None。
必须同时满足三个硬性条件,缺一不可:
-
esbenp.prettier-vscode插件已安装(注意发布者是 Esben Petersen,名称含短横线和空格) -
editor.formatOnSave为true,且未被语言专属设置覆盖(例如"[javascript]": { "editor.formatOnSave": false }会直接关掉 JS 文件) -
editor.defaultFormatter显式设为"esbenp.prettier-vscode"(写成prettier、Prettier或漏掉-vscode都失败)
如何正确配置 language-specific formatOnSave
全局 editor.formatOnSave: true 只对部分语言生效,JS/TS/Vue 等必须单独声明语言块,否则保存时仍不触发。
推荐在项目根目录的 .vscode/settings.json 中写死,避免被用户设置或上级工作区覆盖:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": { "editor.formatOnSave": true },
"[typescript]": { "editor.formatOnSave": true },
"[vue]": { "editor.formatOnSave": true },
"[json]": { "editor.formatOnSave": true }
}
注意:[vue] 块必不可少,否则 <script></script> 里的 JS 不会被格式化;[json] 也要显式加,否则 .prettierrc.json 修改后可能不生效。
配置文件位置和解析器匹配问题
.prettierrc(或 prettier.config.js)必须放在项目根目录(即你执行 code . 打开的文件夹),Prettier 插件只向上查找一级,放错路径等于没配。
常见错误导致格式化跳过或报错:
- TSX 文件里用了
export type,但 Prettier 默认用babel解析器,会报语法错误 → 在.prettierrc中加"parser": "typescript" - Vue SFC 的
<template></template>块格式异常 → 确保.prettierrc里有"htmlWhitespaceSensitivity": "strict"(默认是"css") - 缩进混乱:VSCode 的
editor.tabSize和.prettierrc中的tabWidth不一致,会导致编辑器显示与格式化结果打架
和 ESLint 共存时的关键避坑点
两者同时启用时,eslint.autoFixOnSave 和 editor.formatOnSave 不能共存,否则互相覆盖或静默失效。
稳妥做法:
- 关掉 ESLint 的自动修复:
"eslint.autoFixOnSave": false - 用
eslint-config-prettier关闭所有和 Prettier 冲突的规则(如semi、quotes) - 确保
eslint-config-prettier在 ESLint 配置中排最后,否则前面的规则会覆盖它 - 若仍想用 ESLint 格式化,改用
eslint.format.enable: true,并把 Prettier 规则集成进 ESLint(需eslint-plugin-prettier)
最易被忽略的是:改了 .vscode/settings.json 或 .prettierrc 后没重启 VSCode 窗口,或项目里存在 .vscode/settings.json 覆盖了用户级设置——这些细节不排查,再完整的配置也白搭。











