必须禁用VS Code默认HTML格式器并强制使用Prettier唯一格式化,否则因内置格式器仅按行缩进、不解析语义且配置不一,会导致同一HTML代码保存即产生大量空格/换行diff;关键需设"html.format.enable":false、"editor.defaultFormatter":"esbenp.prettier-vscode",统一.prettierrc中"htmlWhitespaceSensitivity":"css",并用husky+lint-staged在pre-commit自动格式化校验。

必须用 Prettier + 统一配置 + 提交前校验,否则每次 git diff 都是空格和引号的战争,真实修改全被埋了。
为什么 VS Code 自带格式化会加剧冲突
VS Code 内置 HTML 格式器只按行缩进、不解析语义,且默认 html.format.wrapLineLength 是 120、html.format.indentInnerHtml 是 false,而团队里有人开 prettier、有人关、有人用 Tab 有人用空格——结果就是:同一段 <div class="card"><h2>Title</h2><p>Text</p></div>,保存一次就产生 5 行 diff,全是换行和缩进变动。
- 禁用 VS Code 默认 HTML 格式器:
"html.format.enable": false,避免和 Prettier 抢着格式化 - 强制使用
esbenp.prettier-vscode作为唯一格式器,并在.vscode/settings.json中写死:"editor.defaultFormatter": "esbenp.prettier-vscode" - 所有项目根目录必须有
.prettierrc,内容固定为:{ "semi": false, "singleQuote": false, "tabWidth": 2, "useTabs": false, "htmlWhitespaceSensitivity": "css" }
Git 提交前怎么拦住格式污染
靠人记住“保存前检查”不现实。真正有效的防线是提交那一刻自动重写并校验。
- 用
husky+lint-staged在pre-commit钩子中跑:npx prettier --write "{src,packages}/**/*.html" - 加一道保险:提交后立刻
git diff --no-color --quiet || (echo "格式未生效,请检查 .prettierrc"; exit 1),CI 中也复用这条判断 - 禁止任何
git add -f绕过 lint-staged;.gitignore 不得包含.prettierrc或node_modules以外的配置文件
多人改同一段 HTML 时,Prettier 怎么不把逻辑改错
Prettier 不动逻辑,只管结构。但它对空格和换行的“敏感度”设置错了,就会让 DOM 文本节点意外变化(比如 <span> a </span> 压成 <span>a</span>,破坏依赖 whitespace 的 CSS)。
立即学习“前端免费学习笔记(深入)”;
- 关键配置只有这一项:
"htmlWhitespaceSensitivity": "css"—— 它会让 Prettier 尊重white-space: pre类样式,保留标签内有意义的空格 - 对需要严格保留换行的区域(如
<pre>、<textarea>),用<!-- prettier-ignore -->包裹,而不是关整个文件 - 别碰
html.format.preserveNewLines:这是 VS Code 内置选项,和 Prettier 冲突,删掉它
真正难的不是配好 Prettier,而是让所有人提交的 commit diff 里,+ 和 - 真的是业务改动——不是某人换了个引号,也不是另一个人多按了一次保存键。



















