prettier在vscode中ctrl+s无反应,根本原因是未为具体语言绑定格式化器、editor.formatonsave未在语言专属设置中启用,或prettier.requireconfig未设为true导致忽略.prettierrc配置。

Ctrl+S 没反应?不是插件没装,而是 VS Code 根本没让 Prettier 接管格式化流程——它默认不绑定任何格式化器,哪怕你装了十个插件。
怎么确认 Prettier 正在干活
打开一个 .js 或 .ts 文件,看右下角状态栏:如果显示 Prettier(而不是 ESLint、None 或 typescript),说明当前文件已绑定;否则它压根不会运行。
- 右键编辑器 → “格式化文档” → 点“配置默认格式化程序”,选
Prettier - Code formatter,VS Code 会自动写进[javascript]块里 - 更稳妥:直接在项目根目录的
.vscode/settings.json中加这两行:{"editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": {"editor.formatOnSave": true}} - Vue 文件要额外加
[vue]块,否则<script setup></script>区域会被跳过(尤其 Prettier
为什么 editor.formatOnSave 开了还是不格式化
这个设置是“开关”,但不是“万能钥匙”:它只对已绑定 Prettier 的语言生效。常见失效场景是语言专属设置覆盖了全局值。
- 搜索设置项
format on save,找到带方括号的条目(如[javascript]),确认它的值不是false - 不要只写顶层
"editor.formatOnSave": true,必须为每种目标语言显式声明,比如[typescript]、[vue]、[json] - 如果用了 ESLint 扩展且开启了
eslint.autoFixOnSave,它会和 Prettier 抢着改代码,导致保存后样式反复抖动——关掉它,或确保eslint-config-prettier在extends数组末尾
.prettierrc 配置文件为什么不生效
Prettier 插件默认忽略 package.json 里的 prettier 字段,只认独立配置文件;而且它不自动向上递归查找,路径错一格等于没写。
- 配置文件必须放在 VS Code 工作区根目录(即你执行
code .打开的那个文件夹) - 推荐用
.prettierrc.json(最稳),避免 JS 文件中export default和 ESM 环境冲突 - 加一行
"prettier.requireConfig": true到.vscode/settings.json,强制插件只读配置文件,否则它会退回到内置默认值(比如双引号、分号) - TS/JSX/Vue SFC 容易误判 parser,可在
.prettierrc.json中硬写"parser": "typescript"强制解析器
为什么保存后代码被改来改去
这不是 bug,是 ESLint 和 Prettier 同时在修同一类问题(比如分号、引号、空格)——它们规则打架,结果就是保存一次、改两遍、再保存又打回来。
- 删掉
.eslintrc里所有和格式相关的规则,比如"semi"、"quotes"、"indent" - 安装
eslint-config-prettier并把它放在extends数组最后一项:["eslint:recommended", "prettier"]
- 别在 VS Code 设置里手动写
prettier.semi: false,它会覆盖.prettierrc;所有格式规则只在配置文件里定义
Prettier 不是“装完就跑”,它依赖三件事同时成立:语言绑定、保存触发、配置加载。少一个,Ctrl+S 就只是保存,不是格式化。最容易被忽略的是语言专属设置和 prettier.requireConfig 这个开关——很多人调了一小时,最后发现只是配置文件放错了位置,或者没告诉 VS Code “必须按这个文件来”。











