html-validate是专为html设计的校验工具，能捕获语义化、可访问性及w3c合规问题，如p内嵌div、a缺href、img无alt等，需手动配置规则并集成至脚手架ci流程中，确保模板初始即合规。
直接把 HTML 代码质量规则塞进脚手架里，不是加个 eslint-plugin-html 就完事——它默认不校验 <template></template> 外的静态 HTML，也不管 alt 缺失、lang 漏写、img 嵌套错误这些硬性规范。必须手动接管解析链，否则生成的项目从第一天就“带病出生”。
HTML 规范检查不能只靠 ESLint 默认配置
ESLint 对纯 HTML 文件（如 index.html）默认不启用任何规则，即使装了 eslint-plugin-html，它也只在 .vue 或 .jsx 中的内联模板生效，对独立 index.html 文件完全静默。
- 必须显式配置
overrides，让 ESLint 识别并处理**/index.html等路径 -
processor要设为html/eslint-plugin-html，否则 parser 直接跳过 - 规则如
html-validate/require-lang、html-validate/require-alt需单独安装html-validate并接入，ESLint 原生不支持
用 html-validate 替代或补充 ESLint 的 HTML 校验
html-validate 是专为 HTML 设计的 Linter，能精准捕获语义化、可访问性、W3C 合规类问题，比如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/178995432594388.jpg" alt="Pptx To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="overflowclass">Pptx To Html</a>
<p class="overflowclass">使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 里嵌 <div>、<code><a></a> 缺 href、<img> 无 alt —— 这些 ESLint 插件基本覆盖不到。
- 初始化配置：运行
npx html-validate --init，生成.htmlvalidate.json - 关键规则示例：
"require-alt": "error"、"require-lang": "error"、"no-inline-style": "warn" - 需在脚手架的
package.json中添加"lint:html": "html-validate src/index.html public/*.html" - 注意：它不支持
<template></template>块，所以 Vue/React 项目仍要靠eslint-plugin-vue或eslint-plugin-react补位
脚手架模板中预埋校验能力，而非仅文档提醒
很多团队把 HTML 规范写进 Wiki，结果新人照着 index.html 模板复制粘贴时，根本不会打开 lint 报告——等 CI 失败才看到一堆 missing lang attribute 错误。
- 脚手架生成的
index.html模板里，必须包含强制字段：lang="zh-CN"、<meta charset="utf-8">、<title></title>占位符、首屏<img>带alt="" -
preinstall或postinstall钩子里加入html-validate --quiet快速验证模板本身是否合规 - CI 流程中，
lint:html应和lint:js并列执行，失败即阻断，不依赖开发者主动触发
最难的不是写规则，是让规则在项目创建那一刻就生效——模板文件里少一个 lang，后续所有衍生项目都继承这个缺陷；校验命令没绑定到 npm run lint，90% 的人永远不会运行它。脚手架深度定制的终点，是让质量约束变成不可绕过的路径，而不是可选的建议。
