prettier在vscode中默认不工作,必须同时满足三个硬性条件:插件已安装、editor.formatonsave开启、editor.defaultformatter显式设为esbenp.pretterr-vscode;少一个则保存无反应,右下角不显示prettier标识即证明未调用。

Prettier 在 VSCode 里默认不工作,必须同时满足三个硬性条件:插件已安装、editor.formatOnSave 开启、editor.defaultFormatter 显式设为 esbenp.prettier-vscode。少一个,保存时代码就纹丝不动。
为什么保存后代码完全没反应?
不是插件没装,是 VSCode 根本没调用它——右下角状态栏不显示 Prettier 字样,就是最直接的证据。
- 检查当前文件的语言模式:按
Ctrl+Shift+P→ 输入Change Language Mode,确认是JavaScript、TypeScript等,不是Plain Text或未识别类型 -
editor.formatOnSave必须为true,且不能被语言专属设置覆盖(比如"[javascript]": { "editor.formatOnSave": false }会关掉 JS 文件) -
editor.defaultFormatter的值必须严格等于esbenp.prettier-vscode,拼错、漏-vscode、写成prettier都会失败 - 如果项目根目录有
.vscode/settings.json,它会覆盖用户级设置;改完记得重启 VSCode 窗口(包括托盘进程)
为什么装了插件还报 Failed to load module 'prettier'?
VS Code 插件本身不带 prettier CLI,它只负责调用你本地安装的版本。没装包,就只能报错。
- 推荐在项目根目录运行
npm install --save-dev prettier(或yarn add -D prettier),避免跨项目版本不一致 - 全局安装(
npm install -g prettier)在 macOS + nvm 或 Windows 权限受限环境下常失效 - 可显式指定路径:
"prettier.prettierPath": "./node_modules/prettier",防止查找失败 - 离线环境需手动拷贝完整插件文件夹(含
node_modules),仅拖拽 .vsix 不够
怎么让 Prettier 和 ESLint 共存不打架?
ESLint 负责逻辑检查,Prettier 负责格式统一;两者规则冲突会导致保存后代码反复“弹跳”。
- 必须安装
eslint-config-prettier:npm install --save-dev eslint-config-prettier - 在
.eslintrc.js的extends数组中,把'prettier'放在**最后**,例如:["eslint:recommended", "prettier"] - 不要启用
eslint-plugin-prettier的自动修复(eslint.codeActionsOnSave中禁用source.fixAll.eslint),否则保存时 ESLint 会强行重写 Prettier 已格式化的内容 - VSCode 的 ESLint 扩展默认只校验不格式化,无需开启
eslint.format.enable
配置优先级和容易被忽略的细节
项目级配置永远压倒 VSCode 设置,但很多人只改了用户 settings.json,却忘了项目里还有 .prettierrc 或 .vscode/settings.json。
-
.prettierrc(JSON/YAML/JS)放在项目根目录,插件会自动读取;语法错误会导致静默失效(不报错,也不格式化) - VSCode 设置里的
prettier.*项(如prettier.semi)仅作兜底,团队协作中应禁用,全部收口到.prettierrc -
.editorconfig只控制缩进风格(tabWidth/insertSpaces),不触发 Prettier;它和.prettierrc中对应字段必须一致,否则格式化结果与编辑器视觉显示错位 - Vue/React 文件需在
.prettierrc中加"parser": "typescript"或通过overrides指定语言块,否则解析失败











