HTMLHint是最成熟可直接投入生产的HTML代码质量检测方案，通过启用tag-pair、attr-lowercase、attr-value-double-quotes、id-unique、alt-require等核心规则并配置为项目根目录的.htmlhintrc文件，即可高效覆盖90%常见HTML质量问题。
HTMLHint 是目前最成熟、可直接投入生产使用的 HTML 代码质量检测方案，不是“设计与开发插件”，而是选型、配置、集成——绕过从零造轮子的坑。
为什么别自己写 HTML linter 插件
HTML 解析本身有隐式规则（如 <p> 自动闭合、<li> 的父容器推断）、嵌套容错机制、DOCTYPE 影响解析行为等。自己实现一个能覆盖 W3C 标准 + 浏览器实际行为的 parser，成本远超预期。已有工具如 htmlparser2、parse5 已被 HTMLHint、htmllint、eslint-plugin-html 等项目验证多年，稳定性与覆盖率足够。
- 90% 的 HTML 质量问题（未闭合标签、缺失
alt、大小写混用、重复id）都能由HTMLHint内置的 40+ 规则覆盖 - 自研插件大概率会在
<template>、<svg>嵌套、data-*属性校验、自定义元素识别上出偏差 - CI/CD 场景下，维护一个非主流 linter 的规则同步、报告格式、SARIF 兼容性，会拖慢交付节奏
HTMLHint 的最小可用配置怎么写
不推荐用默认规则——它太宽松；也不建议全开——容易误报。从企业官网常见硬性要求出发，优先启用这几条：
-
"tag-pair": true—— 检查所有可闭合标签是否成对，包括<div>、<span>（注意：对<br>、<img>等 void 元素不报错） -
"attr-lowercase": true—— 强制属性名小写，避免CLASS或onClick这类写法 -
"attr-value-double-quotes": true—— 统一用双引号包裹属性值，兼容 JSX 和模板字符串逻辑 -
"id-unique": true—— 防止 JS 通过document.getElementById()拿到错误节点 -
"alt-require": true—— 图片必须含alt，否则无障碍和 SEO 直接扣分
把以上规则存为项目根目录下的 .htmlhintrc，然后运行 npx htmlhint src/**/*.html 即可生效。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
和 Webpack/ESLint 混用时容易漏掉什么
html-webpack-plugin 生成的 HTML 文件默认不在 ESLint 检查范围内——它输出在 dist/，而 ESLint 默认忽略该目录。常见疏忽点：
-
eslint命令没加--ext .html，导致只扫.js文件 -
.eslintignore里写了dist/**，但忘了html-webpack-plugin的template路径（比如src/index.html）其实该被检查 - 用了
eslint-plugin-html，但它默认只处理内联<script>和<style>，对结构类问题（如<h1>缺失、<meta>乱序）无能为力——这类得靠HTMLHint
正确做法是：两个工具各司其职——ESLint 管脚本逻辑，HTMLHint 管文档结构，CI 中并行执行，不合并报告。
CI 中跑 HTMLHint 报错但本地不报，怎么回事
最常见原因是路径 glob 表达式差异：npx htmlhint "**/*.html" 在 Windows 和某些 shell 下会因通配符展开失败，导致漏检。CI 环境（尤其是 GitHub Actions 的 Ubuntu runner）默认用 POSIX shell，而本地可能是 PowerShell 或 zsh。
- 改用
npx htmlhint "src/**/*.html"显式指定范围，避免跨平台歧义 - 确认
.htmlhintrc文件编码为 UTF-8 无 BOM，否则 CI 中读取失败，退回到默认规则（极宽松） - 检查 CI 中 Node.js 版本是否 ≥16——
HTMLHint@v0.16+不再支持旧版本，低版本会静默跳过部分规则
真正麻烦的不是规则本身，而是 HTML 的“合法但危险”写法：比如 <div><p>文本</div></p> 在浏览器能渲染，但 HTMLHint 会报 tag-pair 错误——这种嵌套断裂必须人工修复，工具不会自动补全。
