HTML代码质量自动纠错需用htmlhint查语义结构、prettier统格式，二者不重叠且必须进CI；htmlhint须启用doctype-first、attr-value-double-quotes、alt-require、tag-pair、id-class-value五类硬规则，prettier须设printWidth:100、htmlWhitespaceSensitivity:"strict"、endOfLine:"lf"，CI中须分两步独立执行校验。
HTML代码质量自动纠错不是靠人盯，而是靠规则+工具链在关键节点卡住问题。核心在于：用 htmlhint 检语义和结构，用 prettier 统一格式，两者不重叠、不妥协，且必须进 CI。
htmlhint 配置必须覆盖这 5 类硬性错误
很多团队只开默认规则，结果 alt-require、tag-pair 这类关键规则没生效，导致线上出现图片无 alt、标签漏闭合等低级但影响严重的问题。
-
doctype-first：强制<!DOCTYPE html>必须在首行，否则触发怪异模式 -
attr-value-double-quotes：所有属性值必须双引号，单引号或无引号直接报错 -
alt-require：<img>缺alt属性时中断构建（可配alt-require: ["error", { "allowEmpty": false }]） -
tag-pair：检测未闭合标签，尤其对<div><p></div>这类错位嵌套敏感 -
id-class-value：禁止class="btn red"这种空格分隔写法，只认连字符或下划线
注意：htmlhint 不处理缩进、空格、换行——那是 prettier 的事，混用会导致规则冲突。
prettier 处理 HTML 必须关掉两个默认行为
prettier 对 HTML 的格式化看似“全自动”，但默认配置会悄悄破坏语义结构和可访问性，尤其在团队已有历史代码时容易翻车。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 关掉
htmlWhitespaceSensitivity: "css"（默认值），改用"strict"：否则<span>文本</span><span>连续</span>可能被插入空格，影响内联布局 - 关掉
endOfLine: "auto"，显式设为"lf"：避免 Windows 开发者提交 CRLF 导致 Git diff 爆炸 - 必须启用
printWidth: 100（而非默认 80）：HTML 标签长、属性多，80 容易把单行<input type="text" id="user-name" name="user[name]" required autocomplete="off">拆成 4 行，反而降低可读性
配置示例放在 .prettierrc 中即可生效，VS Code 保存时自动触发，无需额外插件逻辑。
CI 中 htmlhint 和 prettier 要分两步跑，不能合并
有人把 htmlhint 和 prettier --check 合并在一个脚本里，结果 prettier 报错后整个检查退出，htmlhint 的语义问题就漏过了。
- CI 脚本中必须拆成两个独立命令：
npx htmlhint src/**/*.html和npx prettier --check src/**/*.html - 两者都设为 exit code ≠ 0 时失败，但各自独立报告错误位置，方便定位
- 不要用
prettier --write自动修复 HTML：它会重排属性顺序、增删空格，可能意外改坏data-*属性或内联style值（如把style="margin:0;padding:0"改成多行） - 修复应由开发者本地执行
npx prettier --write，CI 只做验证
真正卡住上线的，是 htmlhint 的错误；prettier 的格式问题可以 warn，但不能 block merge —— 否则每次 PR 都要修空格，拖慢节奏。
VS Code 插件配置容易忽略的三个细节
即使装了 HTMLHint 和 Prettier 插件，不调对设置，编辑器根本不会提示你错在哪。
- 确保
html.suggest.html5设为true：否则<main>、<section>这些语义标签不进自动补全，新人容易继续用<div class="main"> - 禁用内置 HTML 格式化：
"html.format.enable": false，否则它和 Prettier 冲突，保存时格式乱跳 - 设置
"editor.defaultFormatter": "esbenp.prettier-vscode"并勾选"editor.formatOnSave"，但仅限["html", "javascript", "typescript"]，别让 Prettier 去碰 JSON 或 Markdown
最常被忽略的是：插件只对打开的文件实时校验，而 CI 扫的是整个 src/ 目录。所以即使你在 VS Code 里没看到红线，CI 仍可能因某份未打开的 HTML 文件报错而拒绝合并。
