htmlhint不基于ast，而是采用正则+简单标签状态机进行浅层结构化检查，适用于alt-require、tag-pair等局部模式匹配，但无法处理依赖上下文语义的规则，如组件内role缺失或嵌套模板中的alt校验。
HTMLHint 本身不基于 AST，别指望它做语法树级规则
HTMLHint 的核心是正则 + 简单标签状态机，不是 AST 解析器。它能快速检查 alt-require、tag-pair 这类结构化但浅层的问题，但无法识别“嵌套在 template 中的 img 是否该有 alt”或“某个自定义组件内是否漏了 role 属性”这类语义依赖上下文的漏洞。
如果你看到文档里提到“AST 支持”，那大概率是混淆了 HTMLHint 和其他工具（比如基于 Clang/LLVM 的 C++ 分析器，或用 Acorn 解析 HTML-like 模板的 ESLint 插件）。
真实情况是：HTMLHint 的规则函数接收的是 token 流或行文本，不是节点对象；你没法拿到 parentNode、children 或 isSelfClosing 这类 AST 属性。
想做真正基于 AST 的 HTML 规则？得换工具链
目前没有主流、轻量、开箱即用的纯 HTML AST 分析器像 ESLint 那样成熟。但可行路径有两条：
- 用
parse5或htmlparser2手动构建 AST，再写遍历逻辑 —— 适合单点强需求，比如“检查所有section下第一个子元素是否为h2” - 把 HTML 转成 JSX / Vue SFC，交给
eslint-plugin-react或eslint-plugin-vue处理 —— 仅适用于模板已工程化、且能接受额外编译步骤的项目
示例：用 parse5 检查 img 是否在 figure 内且带 figcaption
const parse5 = require('parse5');
const document = parse5.parse(html);
// 手动 DFS 遍历，找 img 节点，再向上查 parent.tagName === 'FIGURE'
// 无现成 rule runner，每条规则都要自己写 traverse + condition
HTMLHint 自定义规则的边界在哪
它只适合做「局部模式匹配」，不是「跨节点语义推理」。你能安全扩展的范围包括：
- 属性值格式校验（如
data-id必须匹配/^[a-z0-9-]+$/） - 标签组合约束（如
video必须含source或src） - 全局唯一性检查（如扫描全部
id属性去重） - 注释内容关键词拦截（如禁止出现
TODO: fix later）
不能做的典型例子：
- “
button在模态框内必须有aria-label”——需要知道 DOM 层级关系 - “同一页面中两个
nav不能都用aria-label="main"”——需要跨节点比较属性值 - “
iframe的src必须是 HTTPS”——HTMLHint不解析 URL 协议，只当字符串处理
复杂语义漏洞必须靠人工+多层工具协同
真正影响可访问性或 SEO 的漏洞，比如 aria-hidden="true" 错用在焦点元素上、heading 层级跳变、lang 属性缺失，靠单一工具很难全覆盖。
现实做法是：
- 用
HTMLHint拦住基础错误（attr-lowercase、id-unique） - 用
axe-core在浏览器环境跑运行时检查（能感知 DOM 渲染后状态） - 用
Lighthouse定期审计（覆盖 SEO、性能、无障碍三维度） - 关键页面人工走查（尤其表单、模态框、富媒体区域）
别幻想一个规则文件解决所有问题。HTML 的语义是动态的、上下文敏感的，而静态分析工具只是其中一道窄门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
