htmlhint 配置不生效的常见原因包括：.htmlhintrc 未放项目根目录或未用 --config 指定路径；规则名拼写错误；与 eslint 或 html-validate 混用导致配置被忽略。

HTMLHint 配置不生效的常见原因

配置写完了但 htmlhint 依然报一堆旧错误？大概率是规则没真正加载。默认配置只启用极少数基础规则，.htmlhintrc 文件必须显式声明要启用的规则，且路径必须被正确识别。

实操建议：

• .htmlhintrc 必须放在项目根目录，或通过 --config 参数显式指定路径
• 规则名拼写必须完全匹配官方文档（如 attr-no-duplication 不是 no-duplicate-attr）
• 若用 ESLint 风格的插件集成（如 eslint-plugin-html），htmlhint 的配置文件会被忽略——二者不兼容
• 检查是否误用了 html-validate 或其他工具，它们的规则名和配置格式完全不同

静态页面转动态模板时 HTML 结构校验失效点

当把纯 HTML 拆成 product-card.html、header.html 等片段并用模板引擎（如 EJS、Handlebars）拼接时，htmlhint 默认无法解析模板语法，会把 当作非法标签报错。

解决方向：

• 禁用对模板语法敏感的规则：在 .htmlhintrc 中关闭 attr-name-style、attr-no-duplication 等易误报项
• 改用支持模板的校验器：html-validate 可通过插件（如 @html-validate/express）识别 EJS 语法
• 更稳妥的做法：在构建流程中，先用模板引擎渲染出完整 HTML，再对生成结果运行 htmlhint —— 这样校验的是最终输出，而非源模板

语义化标签被动态插入后丢失可访问性属性

用 JavaScript 动态渲染商品列表时，常直接拼接字符串：innerHTML += '<div class="card">...</div>'。这会导致 aria-label、role、tabindex 等可访问性属性被忽略或未正确绑定。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

关键处理点：

• 避免用 innerHTML 插入含交互元素的结构；改用 document.createElement + setAttribute 显式设置属性
• 动态插入后，手动触发 aria-live 区域更新（如购物车数量变化需通知屏幕阅读器）
• 若用模板字符串，确保变量插值不破坏属性结构：错误写法 <div aria-label="${title}"> 在 <code>title 含引号时会截断属性值；应使用 escapeHtml(title) 预处理

  HTML 静态校验与 CI 流程脱节的实际后果

  本地跑 htmlhint 没问题，CI 流水线却失败？往往是因为 CI 环境缺少 .htmlhintrc 文件、Node 版本不一致，或校验命令未覆盖所有模板路径（比如漏了 views/partials/ 目录）。

  必须检查的三项：

  • CI 脚本中是否执行了 npx htmlhint --config .htmlhintrc src/views/**/*.html，而非仅 src/*.html
  • .htmlhintrc 是否已提交到 Git，且未被 .gitignore 排除
  • CI 使用的 Node 版本是否与本地一致（htmlhint@0.16+ 要求 Node ≥18，旧版本会静默跳过部分规则）

  最易被忽略的是模板路径通配符写法——**/*.html 在某些 shell 下不展开，必须用 find 或明确列出子目录。