根本原因是VS Code格式化器绑定、配置优先级和文件作用域未对齐;必须在.vscode/settings.json中分语言显式设置editor.defaultFormatter,禁用内置HTML格式器,并确保.prettierrc.json路径正确、语法合法且含htmlWhitespaceSensitivity:"strict"。

团队协作中代码格式化失效,根本原因不是插件没装,而是 VS Code 的格式化器绑定、配置优先级和文件作用域三者没对齐——哪怕只漏掉一个语言块的 editor.defaultFormatter,.vue 或 .html 文件就会走内置格式器,导致保存后风格不一致。
为什么团队里每人保存出来的代码 diff 都不一样
这不是 Prettier 不稳定,是本地配置被多层覆盖:用户设置、工作区 .vscode/settings.json、项目根目录 .prettierrc.json、甚至 package.json 里的 prettier 字段,它们的生效顺序有严格优先级。更常见的是语言专属设置缺失:[html] 和 [vue] 必须单独声明 editor.defaultFormatter,否则 VS Code 默认用内置 HTML 格式器(vscode.html-language-features)处理 <template>,而 Prettier 完全不介入。
- 检查方法:打开任意
.vue文件,右下角状态栏看是否显示Prettier;若显示None或Vetur,说明绑定失败 - 冲突高发点:
Vetur默认开启vetur.format.defaultFormatter.html,必须显式设为"prettier",否则它会抢在 Prettier 前格式化 HTML 块 - 团队陷阱:有人全局安装 Prettier CLI,有人只装了插件没装本地
prettier包,导致prettier.config.js中的路径解析失败,静默回退默认规则
vscode/settings.json 必须写的四类配置
不能只靠顶层 editor.defaultFormatter,必须分层写死。以下配置直接复制进项目根目录的 .vscode/settings.json(不是用户 settings.json),才能确保新成员克隆即用:
- 全局开关(启用保存时格式化):
"editor.formatOnSave": true - 全局默认格式化器(兜底):
"editor.defaultFormatter": "esbenp.prettier-vscode" - 语言专属绑定(关键!缺一不可):
"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}、"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}、"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}、"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} - 禁用干扰项:
"html.format.enable": false(关掉 VS Code 内置 HTML 格式器),"vetur.format.defaultFormatter.html": "prettier"(把 Vetur 的 HTML 格式化权交出去)
.prettierrc.json 配置必须满足三个硬条件
VS Code 的 Prettier 插件只认项目根目录下的 .prettierrc.json(或 .prettierrc、prettier.config.js),且不会向上查找父目录。一旦路径或语法出错,就静默失效:
- 文件名必须是
.prettierrc.json(注意开头的点,不是prettier.json) - 内容必须是标准 JSON(不能有注释、末尾逗号、ES6 语法),例如:
{"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100, "trailingComma": "all"} - 如果用了
prettier.config.js,导出方式必须匹配项目模块系统:CommonJS 项目用module.exports = {...},ESM 项目用export default {...};混用会导致配置加载失败
格式化前必须验证的两件事
批量格式化前不验证,等于往 Git 里塞噪音 diff。重点不是“能不能格式化”,而是“格式化结果是否符合预期”:
- 先跑一次干运行:
npx prettier --write --dry-run "**/*.{js,ts,vue,html,css}",看哪些文件会被改、改多少行,避免误触非代码文件(比如dist/或node_modules/) - 格式化后立刻开 Git diff,重点关注是否出现非预期改动:比如
console.log被自动删掉(说明 ESLint 的no-console规则和 Prettier 冲突)、<template>属性被强制换行(说明htmlWhitespaceSensitivity没配或配错)
真正容易被忽略的,是 .prettierrc.json 里没配 htmlWhitespaceSensitivity —— Vue 项目里它默认是 "css",但实际需要 "strict" 才能保证 <template> 中的空格和换行不被乱动。这个值不写进配置,Prettier 就按默认行为处理,而默认行为在 Vue 场景下几乎总是错的。


















