“格式统一”比“写得漂亮”更重要，因为它直接决定协作效率：引号混用、自闭合标签不一致、属性顺序随意等会导致Git Diff混乱、合并冲突增多、PR审查失焦；Prettier通过强制规则（如tabWidth、singleQuote、htmlWhitespaceSensitivity）和CI校验（prettier --check）实现自动化守门，而非依赖人工自觉。
为什么“格式统一”比“写得漂亮”更重要
团队里没人真关心你写的 <div> 是缩进 2 还是 4 个空格，但所有人都会被混用的 class="btn" 和 class='btn'、忽闭忽不闭的 <img src="x"> 和 <img src="x" /> 搞得 Git Diff 一团糟。格式不一致直接抬高合并冲突概率，拖慢 PR 审查节奏。
- 引号混用（单/双）会让
git diff显示大量“无意义变更”，掩盖真实逻辑改动 - 自闭合标签写法不统一（
<br>vs<br />）在 Prettier + Vue/React 中可能触发模板解析警告 - 属性顺序随意（
class写最后、id写中间）导致多人协作时难以快速定位关键属性
用 Prettier 做强制守门员，而不是靠人盯人
指望每个成员自觉执行规范不现实。Prettier 不是锦上添花的插件，是防止风格滑坡的底线工具。
- 在项目根目录加
.prettierrc，至少锁定这三项：tabWidth: 2、singleQuote: false（强制双引号）、htmlWhitespaceSensitivity: "css" - 配
husky+lint-staged：提交前自动跑npx prettier --write "**/*.html"，不合规范的代码根本推不上远程分支 - VS Code 用户必须装 Prettier 插件，并在
.vscode/settings.json里设"editor.defaultFormatter": "esbenp.prettier-vscode"，保存即格式化
哪些 HTML 规范必须人工约定，不能全交给工具
Prettier 管不了语义和结构。这些点工具无法判断对错，但直接影响可维护性：
-
class名必须语义化且可预测，禁用left-box-2这类命名；推荐 BEM 风格，如header__logo、card--featured - 嵌套深度超过 4 层（
<div><div><div><div><div>）必须拆分组件或加注释说明原因，否则 Reviewer 有权拒收 - 所有交互元素（按钮、链接）必须有明确的
role或可访问性属性，例如<button type="button">不能省略type
CI 流程里漏掉这一项，格式化就形同虚设
本地格式化再严格，只要 CI 不校验，就有人绕过 husky 直接 push —— 尤其是新成员或临时外包。
立即学习“前端免费学习笔记（深入）”；
- 在 GitHub Actions 或 GitLab CI 的 job 里加一步：
npx prettier --check "**/*.html" - 失败时不许合并，且错误信息要具体到文件行号，比如
src/pages/home.html:12:5，避免模糊提示 - 别只检查 HTML：把
.prettierignore控制在最小范围，第三方库目录除外，其余一律纳入
