VS Code默认不格式化HTML，必须手动将Prettier设为默认格式化器，并禁用内置html.format.enable；关键配置为printWidth:100和htmlWhitespaceSensitivity:"css"。
VS Code 默认不格式化 HTML？必须手动设 Pretterr 为默认格式化器
不是插件没装，也不是 .prettierrc 写错了，而是 VS Code 默认禁用 Prettier 处理 .html 文件类型。右键“Format Document”根本不会弹出 Prettier 选项。
必须手动指定：
- 打开任意一个
.html文件 → 右键 → Format Document With… → Configure Default Formatter… - 从列表中选
Prettier - Code formatter - 同时确认设置里启用了
"editor.formatOnSave": true - 检查项目根目录的
.vscode/settings.json，删掉或注释掉"html.format.enable": true—— 这是 VS Code 内置格式化器的开关，和 Prettier 冲突
属性被乱拆成多行？调 printWidth 和 htmlWhitespaceSensitivity
常见现象：<div class="a b c d e f" data-id="123" title="long text"> 被硬折成 3 行，可读性反而下降。这不是 bug，是 Prettier 按默认 printWidth: 80 主动拆分的结果。
关键配置项：
立即学习“前端免费学习笔记（深入）”；
-
"printWidth": 100—— HTML 属性普遍比 JS 多，80 容易误拆；60 更不可取，基本等于放弃单行属性 -
"htmlWhitespaceSensitivity": "css"—— 必须设这个值，否则 Prettier 可能把<p><img>text</p>错误折行，破坏行内元素布局逻辑 - 不要设
"bracketSameLine": true（即把>放在最后一行末尾），多属性标签时结尾极难定位
正确 .prettierrc 片段：
{
"printWidth": 100,
"htmlWhitespaceSensitivity": "css",
"tabWidth": 2,
"useTabs": false
}Git 提交前怎么拦住不合规的 HTML？用 Husky + lint-staged 做 pre-commit 校验
仅靠保存时自动格式化不够——有人会关插件，或直接改 dist/ 下的文件。必须在提交前强制校验。
推荐组合：
- 用
Husky+lint-staged在pre-commit钩子里跑npx prettier --check "**/*.html" - 再配合
HTMLHint做语义检查：比如强制<img>必须有alt，<a>必须有href - 不要在
pre-commit里执行prettier --write自动修复——这会让提交内容和开发者本地文件不一致，引发协作混乱
真实报错示例：error: src/index.html: Property "alt" is missing on element "img"，比 Code Review 时口头提醒管用十倍。
为什么 <img align="right"> 没被转成 CSS？Prettier 从不处理样式语义
Prettier 只格式化结构：标签换行、属性顺序（id → class → data- → src）、引号、缩进、自闭合写法（<img />）。
它完全不解析、不修改任何样式相关的内容：
-
<img align="right">会被原样保留，不会转成float: right -
<img style="margin-left:auto">不会自动提取到外部 CSS，也不会加class - 图片是否居中、环绕、响应式，完全取决于你写的 CSS；如果对齐“失效”，问题一定出在 CSS 层（比如父容器没设
text-align: center，或没加display: block让margin: 0 auto生效）
真正容易被忽略的是：htmlWhitespaceSensitivity: "css" 这个配置一旦漏掉，格式化后可能肉眼看不出错误，但页面布局会在某些内联场景下悄悄崩掉——这种问题往往要等 QA 或用户反馈才暴露，排查成本极高。
