htmlhint专用于纯html静态分析，能检测doctype位置、标签配对、alt属性缺失、id唯一性等eslint及其插件无法覆盖的html专属问题。
HTML静态分析工具里，HTMLHint 是目前最轻量、最易集成、规则最贴近真实项目需求的选项；ESLint 本身不处理 HTML，但通过插件可覆盖 Vue/React 中的模板部分——二者定位不同，不能互相替代。
为什么不用 ESLint 直接检查纯 HTML 文件
ESLint 的核心是解析 JavaScript AST，它压根不识别 <div></div> 这类结构。即使你强行用 eslint-plugin-html，它也只是把 HTML 中的 <script></script> 和 <style></style> 块抽出来交给 ESLint 处理，对标签闭合、属性引号、alt 缺失等 HTML 专属问题完全无能为力。
常见错误现象：ESLint 配置完后运行 eslint index.html，零报错，但文件里满屏 <img src="x"> 没 alt —— 这不是它该管的事。
- 真正需要检查纯 HTML 时，必须用
HTMLHint或tidy这类专有工具 -
eslint-plugin-vue和eslint-plugin-react才是 ESLint 生态中“能碰 HTML-like 语法”的合法插件 - 不要在
.html文件上配eslint-plugin-html并期望它校验结构规范
HTMLHint 能解决哪些 ESLint 插件做不到的事
HTMLHint 的规则直接对应 HTML 标准和可访问性要求，比如：
-
doctype-first：强制必须在第一行，<code>ESLint插件连这个概念都没有 -
tag-pair：检测<p>hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>是否成对，而eslint-plugin-vue只在.vue单文件组件中做类似检查 -
alt-require：所有<img>必须带alt，这是 WCAG 硬性要求，ESLint 插件默认不介入 -
id-unique：全局 ID 冲突检测，纯 HTML 场景高频问题，ESLint 插件无法跨标签分析
这些不是“风格偏好”，而是影响渲染、SEO、无障碍的实际缺陷。用错工具，等于漏掉关键质量门禁。
Vue/React 项目里怎么搭配用
现代前端项目通常混合使用：HTMLHint 扫描 public/index.html 和静态 HTML 页面；ESLint 插件扫描组件模板。
- Vue 项目：启用
eslint-plugin-vue+vue/multi-word-component-names等规则，同时用HTMLHint单独跑public/**/*.html - React 项目：用
eslint-plugin-react检查 JSX，但public/*.html仍需HTMLHint守住入口文件底线 - CI 流程中建议分两步：
htmlhint "**/*.html"和eslint --ext .js,.jsx,.vue src/
别指望一个命令扫全量。HTML 和 JS/JSX 的语义层、解析器、错误类型完全不同，硬塞进同一个工具链只会让配置变脆弱、报错难定位。
容易被忽略的配置细节
很多人跑通 htmlhint 命令就以为万事大吉，但实际项目中三个点常被跳过：
-
.htmlhintrc必须放在项目根目录，否则htmlhint "**/*.html"不会自动加载（不像 ESLint 会向上查找） - 规则如
attr-value-double-quotes对单引号字符串（class='btn'）报错，但某些 CMS 输出或遗留代码依赖单引号——得明确设为false，而不是删掉整条规则 -
htmlhint --init生成的是基础配置，但像input-requires-label这类可访问性强规则，默认是false，需手动打开
工具不会替你判断业务约束，它只按规则执行。配置写错一行，整个检查就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
