prettier.requireConfig 必须设为 true,否则 VS Code 会退化为内置格式器导致风格不一致;需在 .vscode/settings.json 中配置该值、指定 editor.defaultFormatter 为 esbenp.prettier-vscode、使用本地 prettier.prettierPath 并配好 .prettierrc.json5。

prettier 在 VS Code 中不是装上插件就自动统一风格的——它默认会退化成编辑器内置格式器,尤其在没有项目级配置时,不同人保存出来的代码缩进、引号、分号、JSX换行全可能不一致。
prettier.requireConfig 必须设为 true
这个配置是团队协作的底线。
不启用它,VS Code 会按自己理解的“合理格式”去格式化,比如对 Vue 文件里的 <template> 可能用 prettyhtml,对 .js 可能走 TypeScript 内置格式器,结果就是:
- 同一个文件里 HTML 和 JS 风格割裂
-
npm run format和Ctrl+S输出不一致 - Git 提交里全是无意义的格式变更
正确做法是:
- 在项目根目录的
.vscode/settings.json(工作区设置)中写入:"prettier.requireConfig": true - 同时确保项目里有
.prettierrc或.prettierrc.json5 - 不要只依赖用户级
settings.json,否则新成员 clone 项目后立刻掉坑里
editor.defaultFormatter 要精确指定插件 ID
VS Code 允许多个格式化插件共存,但只认一个“默认”。常见错误是:
- 只配了
"editor.formatOnSave": true,没指定谁来干这事 - 混用了
octref.vetur和esbenp.prettier-vscode,导致 Vue 文件 template 和 script 格式器打架
必须明确写:"editor.defaultFormatter": "esbenp.prettier-vscode"
注意:
- ID 必须完全匹配,大小写都不能错
- 如果项目用 Vetur,还要额外关掉它的默认 HTML 格式器:
"vetur.format.defaultFormatter.html": "prettier" - 对于
.vue文件中的<script>,Prettier 默认支持,无需额外桥接
prettier.prettierPath 要指向本地 node_modules
线上 CI、同事本地、你自己机器,Node 版本和全局 Prettier 版本大概率不一致。直接依赖全局安装的 prettier,会导致:
- 本地格式化正常,CI 报错说 “unexpected token {”
- 团队有人用 Prettier 3.1,有人用 3.3,
printWidth行为细微差异引发反复 reformat
解决方案:
- 项目中运行:
npm install prettier --save-dev --save-exact - 在
.vscode/settings.json中声明路径:"prettier.prettierPath": "./node_modules/prettier" - 不要用
~/.npm-global或绝对路径,跨平台不兼容
.prettierrc 配置要覆盖语言特例
纯 JSON 不支持注释,容易误删逗号或写错括号;推荐用 .prettierrc.json5。关键点:
-
printWidth: 100比默认 80 更适配现代显示器,减少无谓换行 -
overrides是刚需,例如:- CSS/SCSS 里强制双引号:
{ "files": "*.{css,scss}", "options": { "singleQuote": false } } - Markdown 强制软换行:
{ "files": "*.md", "options": { "proseWrap": "always" } }
- CSS/SCSS 里强制双引号:
- 不要盲目抄网上“最佳实践”,比如
semi: false必须和 ESLint 的semi: ["error", "never"]对齐,否则保存即报错
真正卡住团队的往往不是不会配,而是某台机器漏了 prettier.requireConfig,或是 .prettierrc 放错了位置导致被忽略——这些地方没有报错提示,只有提交后大家互相 reformat 才发现风格又乱了。

















