纯HTML文件必须用HTMLHint扫描，因为ESLint仅解析JavaScript AST，不识别HTML标签结构；eslint-plugin-html仅提取<script>和<style>块交由ESLint处理，对<div><img>等标签完全无效。
纯 HTML 文件必须用 htmlhint 扫，ESLint 插件对 .html 文件里的标签结构完全无效——这不是配置问题，是解析器层面的不支持。
为什么不能在 .html 文件上配 eslint-plugin-html
ESLint 的核心是解析 JavaScript AST，它根本不认识 <div>、<img> 这类标签节点。即使装了 eslint-plugin-html，它也只是把 <script> 和 <style> 块抽出来交给 ESLint 处理，其余部分直接跳过。
常见错误现象：eslint index.html 零报错，但文件里满屏 <img src="logo.png"> 缺 alt 属性——这不是漏配规则，是工具根本没能力看。
-
eslint-plugin-vue只作用于.vue单文件组件中的模板，不处理独立.html文件 -
eslint-plugin-react同理，只校验 JSX 语法，不校验public/index.html - 强行让 ESLint 处理 HTML 结构，会导致规则失效、报错位置错乱、CI 中误报或漏报
htmlhint 必须集成进统一脚手架的三个硬性位置
不是“加个命令就行”，而是要嵌入构建生命周期的关键出口点，否则容易被绕过或遗忘。
立即学习“前端免费学习笔记（深入）”；
-
pre-commit 钩子：用
husky+lint-staged拦住带结构缺陷的 HTML 提交，例如id-unique冲突或缺失<title> -
CI 流水线第一道检查：在
npm run build前执行htmlhint "public/**/*.html"，失败则中断构建 -
本地开发启动时可选扫描：在脚手架的
dev脚本中加--html-check开关，启动时自动跑一次htmlhint并输出警告（不中断）
注意：htmlhint "**/*.html" 默认不递归扫描 node_modules，但如果你项目里有手动引入的第三方 demo HTML（比如 docs/demo.html），需显式加入 glob。
htmlhint 配置必须覆盖 WCAG 和渲染底线规则
很多团队用默认规则或只开几个风格类规则，结果漏掉真正影响功能和合规的问题。
以下 5 条是生产环境不可妥协的底线规则，必须启用：
-
"doctype-first": true—— 强制<!DOCTYPE html>在第一行，否则触发怪异模式 -
"tag-pair": true—— 检测<p>hello这类未闭合标签，IE/旧 Safari 渲染会错位 -
"alt-require": true—— 所有<img>必须含alt，否则无障碍阅读器无法播报，WCAG 2.1 A 级强制要求 -
"id-unique": true—— 全局 ID 冲突在单页应用中极易引发 JS 获取元素失败，且document.getElementById行为不可预测 -
"title-require": true—— 缺失<title>影响 SEO 和浏览器标签页识别，也是 WCAG 要求
这些不是“建议”，是浏览器渲染、SEO、无障碍三者的共同交集；关掉任何一条，都等于主动放弃一部分用户或搜索流量。
扫描范围容易被忽略的边界场景
脚手架统一后，HTML 文件不再只存在于 public/ 目录下，以下位置常被漏扫：
-
src/templates/*.html：某些 SSR 或微前端项目会把模板存这里，htmlhint默认 glob 不覆盖 -
tests/fixtures/*.html：测试用例中的 HTML 片段，若含结构错误，可能掩盖真实 bug -
docs/**/*.html：文档站点的静态页，常由工具生成，但alt、lang等属性易缺失
推荐在脚手架的 package.json 中统一定义扫描命令："html:check": "htmlhint \"public/**/*.html\" \"src/templates/**/*.html\" \"docs/**/*.html\""，避免各项目各自维护路径。
