HTML代码质量防护需工具链自动卡点：lint（htmlhint）管语义与可访问性，prettier管格式，二者通过lint-staged联动，在保存、提交、CI三环节分别拦截问题；单独用htmlhint会漏缩进/引号因它不处理格式细节。
HTML 代码质量防护不是靠人盯，而是靠工具链自动卡点。只要配置到位，lint 和 prettier 联动就能在保存、提交、CI 三个环节分别拦截结构错误、风格混乱和语义隐患。
为什么 htmlhint 单独用会漏掉缩进/引号问题
htmlhint 是语义型 Linter，专注标签闭合、属性合法性、可访问性等逻辑问题，但它默认不处理格式细节。比如：
- <div class=foo>（缺少引号）会被报错
- <div\n class="foo">（换行+空格）却不会警告
而 prettier 擅长统一缩进、引号、空格、换行，但对 role 拼错或 alt 缺失毫无反应。两者职责不同，硬凑一个工具只会留缺口。
建议做法：
- 用
htmlhint检查doctype是否存在、img是否有alt、form是否有label等可访问性与语义规则 - 用
prettier统一html文件的缩进（2 空格）、引号（双引号）、属性换行策略 - 通过
lint-staged把两者串起来：先prettier格式化，再htmlhint验证语义
npm run lint 报 Unexpected token < 怎么定位
这不是 HTML 错误，是 Linter 误把 .html 当成 JS 解析了。常见于：
- eslint 配置里没排除 **/*.html，或者没装 eslint-plugin-html
- htmlhint 没单独配成独立脚本，被 eslint 的 npm run lint 命令兜底执行
检查点：
- 运行
npx htmlhint --version确认已安装且版本 ≥ 0.16.0 - 确认
package.json中有明确的"lint:html": "htmlhint src/**/*.html" - 如果用
eslint同时管 JS 和 HTML，必须加eslint-plugin-html，并在.eslintrc.js中声明overrides规则，指定files: ["*.html"]时启用该插件
CI 中 htmlhint 突然失败，本地却正常
通常是因为 CI 环境没读到本地配置文件。htmlhint 默认只认根目录下的 .htmlhintrc 或 htmlhint.conf.json，但 CI 流水线可能：
- 没拉取配置文件（.gitignore 误删了 .htmlhintrc）
- 工作目录不是项目根目录（比如用了 submodule 或自定义 checkout 路径）
- Node 版本差异导致某些规则行为变化（如 attr-value-double-quotes 在 v1.x 和 v2.x 对自闭合标签判断不同）
实操建议：
- 在 CI 脚本开头加
ls -la | grep htmlhint，确认配置文件存在且路径正确 - 显式传参：用
htmlhint --config ./htmlhint.conf.json src/**/*.html，避免隐式查找 - 把关键规则写死进命令行，比如
--rules "attr-value-double-quotes: true, tag-pair: true"，绕过配置文件加载不确定性
真正难的不是让工具跑起来，是让 htmlhint 的规则和团队真实需求对齐——比如要不要强制 aria-label、是否允许内联 style、data- 属性命名用 kebab 还是 camelCase。这些没法靠自动化推导，得靠人写进 htmlhint.conf.json 并定期 review。
