HTMLHint不能直接用于现代前端项目，因其仅校验静态HTML文件，无法解析.vue/.jsx等组件内的模板；需配合ESLint插件处理组件模板，HTMLHint仅负责纯HTML文件校验。
为什么 HTMLHint 不能直接用在现代前端项目里
HTMLHint 默认只校验静态 HTML 文件，对 .vue、.jsx 或含模板字符串的 .js 文件完全无感知。很多团队配完就发现 CI 里根本没报错——不是规则没生效，是根本没扫描到组件里的 HTML 片段。
真正要覆盖 Vue/React 项目，必须配合构建工具做预处理：要么用 htmlhint-loader 接入 Webpack（但已多年未维护），要么改用 eslint-plugin-vue 或 eslint-plugin-react 做模板校验，HTMLHint 只负责纯 .html 文件（比如营销页、邮件模板）。
- Vue 单文件组件中的
<template>内容，HTMLHint 不解析 AST，只当普通文本跳过 -
npm run htmlhint src/**/*.html这种命令对src/App.vue无效 - 若强行用
htmlhint --file-exts html,vue，会把.vue当成 HTML 解析，导致大量误报（如<template>标签被当成非法嵌套）
怎么让 HTMLHint 规则真正落地进 CI 流程
关键不是加更多规则，而是让校验结果能阻断错误提交。默认 htmlhint 退出码为 0 即使有 warning，CI 会静默通过。
- 必须加
--reporter=unix参数，否则 Jenkins/GitLab CI 无法解析错误行号 - 在
package.json的scripts中写成："lint:html": "htmlhint --config .htmlhintrc --reporter=unix src/*.html || exit 1" - Git pre-commit hook 要用
htmlhint --format=compact，避免 ANSI 颜色字符干扰 husky 输出 - 企业级配置建议禁用
attr-lowercase（某些 legacy 系统依赖大写属性名），改用attr-no-duplication和attr-req-value控制更关键的问题
HTMLHint 规则冲突时优先级怎么定
规则之间存在隐式依赖，比如 id-unique 依赖 attr-no-duplication 先过滤掉重复属性，否则可能漏报。官方文档不说明这点，实际运行时容易误判。
立即学习“前端免费学习笔记（深入）”；
-
doctype-first和head-script-disabled不能同时启用：前者要求<!DOCTYPE>必须在第一行，后者会因检测到<script>在<head>里而提前退出解析 -
attr-value-double-quotes与attr-no-unsafe-char冲突：后者会把双引号转义为"，导致前者认为没用双引号 - 企业规范建议关闭
inline-script-disabled，改用 CSP 策略管控，否则会误杀内联 JSON 初始化数据
HTMLHint 和 Prettier / ESLint 如何共存不打架
HTMLHint 只做合规性检查，不做格式化。如果同时用 Prettier 自动格式化 HTML，可能触发规则矛盾——比如 Prettier 把 <div class="a b"> 拆成多行，但 max-len 规则限制单行 120 字符，就会反复报错。
- 在
.prettierrc中设"htmlWhitespaceSensitivity": "ignore"，避免空格敏感类规则冲突 - HTMLHint 的
indentation规则必须关掉，Prettier 统一管缩进 - ESLint 的
react/jsx-boolean-value和 HTMLHint 的attr-no-missing-value功能重叠，建议只留 ESLint 管理 JSX，HTMLHint 专注纯 HTML - CI 中执行顺序应为：
prettier --check→htmlhint→eslint，避免格式问题干扰语义校验
规则越多越难维护，企业真正需要守住的是 ID 唯一性、无障碍属性缺失、脚本加载位置这三类硬性红线，其余靠开发习惯和 Code Review 补位更实际。
