VSCode内置HTML格式化不够用，因其仅处理基础缩进与换行，不统一属性顺序、引号类型、自闭合斜杠及空白敏感性，易致Git频繁出现空格差异；需通过项目级.vscode/settings.json配置+Prettier+husky三层约束落地。
团队里HTML格式不一致？不是靠口头约定，而是靠配置落地——否则每次git diff都在比空格数。
为什么 VSCode 内置 HTML 格式化不够用
VSCode 默认的 HTML 格式化只处理基础缩进和换行，对属性顺序、引号类型、自闭合标签斜杠、空白敏感性等完全不干预。比如 <img src="a.jpg" alt="test"> 和 <img alt="test" src="a.jpg"> 在默认格式化下都不会被统一，Git 里就真会当成两处修改。
- 默认不校验
htmlWhitespaceSensitivity，可能导致white-space: pre-wrap布局被意外破坏 -
html.format.indentInnerHtml默认为false，<body>内子元素不缩进，嵌套深了就难读 - 无法控制属性是否单行排列，长标签容易挤成一行，审查时得横向滚动
- 不兼容 Prettier 的语义化规则（如强制双引号、末尾逗号），和 JS/TS 配置割裂
必须写进 .vscode/settings.json 的 4 个关键项
仅靠全局设置或口头约定没用，项目级配置才能让新成员开箱即一致。以下配置应直接写入项目根目录的 .vscode/settings.json：
-
"editor.formatOnSave": true：保存即格式化，避免“忘了按快捷键” -
"editor.tabSize": 2：明确缩进宽度，禁用editor.detectIndentation（设为false）防止读取旧文件历史干扰 -
"[html]": { "editor.insertSpaces": true }：强制空格，杜绝 Tab 混入 -
"html.format.wrapLineLength": 100：比默认 120 更严格，防止单行过长影响可读性
注意："[html]" 是语言专属配置块，必须用方括号包裹，否则对 HTML 文件不生效。
立即学习“前端免费学习笔记（深入）”；
Prettier 配置里最容易漏掉的 htmlWhitespaceSensitivity
这个选项不显眼，但直接影响布局安全。设成 "htmlWhitespaceSensitivity": "css" 才能确保格式化不删改影响 display: inline 元素之间的真实空白——比如 <span>A</span> <span>B</span> 中的空格会被保留，而设成 "strict" 或 "ignore" 都可能出视觉偏差。
- 错误写法：
"htmlWhitespaceSensitivity": "ignore"→ 可能合并相邻文本节点，破坏排版 - 正确写法：
"htmlWhitespaceSensitivity": "css"→ 行为与浏览器 CSS 白空间处理一致 - 搭配
"printWidth": 100和"tabWidth": 2，形成完整 HTML 约束闭环
Git 提交前自动格式化的最小可行链路
光靠编辑器配置不够，有人会绕过 VSCode 直接改文件，或 CI 构建用的是干净容器。必须在提交环节兜底：
- 安装
husky和lint-staged：npm install -D husky lint-staged - 在
package.json中加脚本："prepare": "husky install"，然后运行npm run prepare - 配置
lint-staged只处理 HTML："*.html": ["prettier --write"] - 生成 pre-commit hook：
npx husky add .husky/pre-commit "npx lint-staged"
这样哪怕有人用 Vim 或命令行改了 HTML，commit 前也会被强制格式化——不是靠自觉，是靠流程卡点。
真正难的不是配出一套规则，而是让所有人（包括实习生和外包）改完代码后，git status 里看不到缩进变更。这要求配置必须侵入到编辑器、提交钩子、CI 流程三层，缺一层，协作成本就悄悄回来。
