HTML代码质量评估必须在构建时自动触发并阻断失败构建：Webpack需用htmlhint-loader配合failOnHint:true；Vite可用vite-plugin-html在configResolved钩子校验原始模板；Parcel 2.8+需在.parcelrc启用validator并手动传入规则；CI中须确保Node版本、路径匹配和多入口覆盖。
HTML代码质量评估不能只靠人工点开W3C验证器或手动跑一次htmlhint——它必须在Vite、Webpack、Rollup、Parcel这些打包工具启动时自动触发，且失败时能阻断构建，否则就等于没集成。
Webpack中让html-webpack-plugin和htmlhint真正联动
很多人以为装了html-webpack-plugin就自动检查HTML了，其实它只负责注入资源，不校验语法。要让它和htmlhint协同，得靠html-webpack-plugin的beforeEmit钩子手动介入：
- 安装
htmlhint和htmlhint-loader（注意不是htmlhint-webpack-plugin，那个已废弃） - 在
webpack.config.js里给.html文件加htmlhint-loader，但必须放在html-webpack-plugin之前，否则loader读不到原始模板内容 - 关键点：
htmlhint-loader默认只警告不报错，需显式配置failOnHint: true，否则CI里构建照样通过
示例片段：
module.exports = {
module: {
rules: [{
test: /\.html$/,
use: [{
loader: 'htmlhint-loader',
options: {
failOnHint: true,
htmlhintrc: '.htmlhintrc'
}
}]
}]
}
};
Vite插件生态里没有htmlhint官方支持？用vite-plugin-html补位
Vite原生不处理HTML lint，vite-plugin-html是目前最稳的替代方案。它允许你在HTML生成前执行自定义逻辑，正好插入htmlhint校验：
立即学习“前端免费学习笔记（深入）”；
-
vite-plugin-html的enforce: 'pre'确保它早于Vite默认HTML处理流程执行 - 校验失败时抛出
Error，Vite会中断构建并显示具体哪行HTML违规 - 注意：不要在
transformHtml里直接调htmlhint，因为此时HTML已是编译后字符串；应改用apply: 'build'+configResolved钩子，在读取模板文件阶段校验原始内容
Parcel 2+如何避免“HTML检查被跳过”的静默失效
Parcel默认对.html文件只做打包，不走任何lint流程。它的插件机制又不像Webpack那么透明，容易误以为加了@parcel/validator-htmlhint就万事大吉：
- Parcel 2.8+才正式支持validator插件，低于此版本即使安装也无效
- 必须在
.parcelrc中显式启用："validators": { "*.html": ["@parcel/validator-htmlhint"] } - 校验规则不会自动读取项目根目录的
.htmlhintrc，得在@parcel/validator-htmlhint配置里手动传入rules对象，或用configPath指定路径 - Parcel的缓存机制极强，改了
.htmlhintrc后不删.parcel-cache，旧规则仍生效
CI/CD里HTML质量门禁最容易漏掉的三个硬性条件
很多团队把HTML lint加进CI脚本就以为闭环了，结果上线后还是出现未闭合标签或缺失alt——问题往往出在环境隔离和路径解析上：
- CI容器里Node版本太低，
htmlhint某些规则（如attr-lowercase）在v0.14以下不生效 - 本地开发用相对路径引用图片，CI里
htmlhint因找不到src文件而跳过img-alt检查，需配合no-inline-style等纯语法规则兜底 - 多入口项目（如
src/pages/a.html和src/pages/b.html）若只在package.json里写"lint:html": "htmlhint src/**/*.html"，CI可能因glob匹配失败而漏检，建议改用npx htmlhint --config .htmlhintrc "src/**/*.{html,htm}"
真正卡住质量的，从来不是规则多不多，而是每次构建时有没有强制执行、执行时路径对不对、失败时构建停不停——这三件事没钉死，所有配置都是摆设。
