HTMLHint通过启用tag-pair规则自动检测标签未闭合、嵌套错位等问题，默认开启且精准定位行号列号；配合attr-lowercase和attr-value-double-quotes可规范属性书写，但需注意Vue/JSX等场景的兼容性配置。
如何用 htmlhint 检查标签未闭合问题
tag-pair 规则是 HTMLHint 里最常触发的错误之一，它会报出 <div><p>文本</div> 这类嵌套错位、漏闭合、多闭合的情况。浏览器可能自动修复，但静态检查会直接标出第几行哪一列。
实际使用时注意：
- 默认启用该规则，无需额外配置
- 自闭合标签如 <img>、<input> 在 HTML5 中允许不写斜杠，但 tag-pair 不校验这个，它只关心“有开无闭”或“闭多于开”
- 如果项目混用 Pug 或 JSX 模板，部分片段不是完整 HTML，建议在 .htmlhintrc 中临时禁用："tag-pair": false，否则会误报
- 错误示例输出：index.html:12:5: Tag must be paired.
attr-lowercase 和 attr-value-double-quotes 的真实影响
这两个规则看似琐碎，但在团队协作和构建流程中容易引发意外失败。
常见踩坑点：
- attr-lowercase 会把 <DIV class="foo"> 当成错误，哪怕只是临时调试写法
- attr-value-double-quotes 对 Vue 模板尤其敏感：v-bind:class="{'active': isActive}" 里的单引号会被当成违规，此时应改用 "attr-value-quote-style": "double"（需 HTMLHint v1.0+）或直接设为 false
- 若项目中存在内联 JSON 属性（如 data-config='{"key":"val"}'），双引号嵌套易出错，建议统一用 data-config='{"key":"val"}' + 关闭该规则
- 命令行临时关闭： npx htmlhint --rules attr-value-double-quotes:false index.html
为什么 .htmlhintrc 配置文件必须放在项目根目录
HTMLHint 默认只向上查找一级父目录找 .htmlhintrc，不会递归扫描整个项目树。如果配置文件放在 src/ 下，运行 npx htmlhint src/**/*.html 时将无法加载规则。
实操建议：
- 配置文件名必须是 .htmlhintrc（带点开头），后缀只能是 .json 或 .js（后者需导出对象）
- 路径通配符含 ** 时，务必用双引号包裹命令参数，否则 shell 可能提前展开失败：npx htmlhint "src/**/*.html"
- 若想对子目录单独配置，只能靠命令行 --config 指定路径，比如：npx htmlhint --config src/pages/.htmlhintrc src/pages/*.html
浏览器开发者工具不能替代 htmlhint 的地方
Elements 面板能看到最终渲染结构，但它看不到原始语法问题——比如 <meta charset=utf8> 缺少引号，浏览器会照常解析，但 htmlhint 会按 attr-value-double-quotes 报错；又比如重复 ID，在 DOM 中可能只显示一个，但 id-unique 规则会明确标出两个同名 id 的位置。
立即学习“前端免费学习笔记（深入）”；
真正需要 htmlhint 的场景：
- CI 流程中拦截低级语法错误，避免上线后因小疏漏导致 SSR 渲染异常
- 多人协作时统一属性书写风格，防止 class 和 CLASS 并存
- 检查 alt、lang、title 等可访问性必需属性是否遗漏
- 静态生成站点（如 Hugo、Jekyll 输出）在构建前批量扫一遍，比人工 review 高效得多
