htmlhint集成到自研脚手架需在模板生成后立即检查，区分空模板与业务文件，通过非阻断式命令触发校验并输出修复建议，动态适配vue/react框架配置，保留doctype-first、id-unique、alt-require等通用规则，避免误报。
直接集成 HTMLHint 到自研脚手架里，不是加个 npm install htmlhint --save-dev 就完事——它必须在模板生成后立即介入检查，且要能区分「用户刚建的空模板」和「已有业务 HTML 文件」，否则 CI 会误报、本地开发会阻塞。
脚手架初始化阶段如何触发 HTMLHint 检查
很多团队把 HTMLHint 当成纯 CI 工具，等 push 才跑，这在脚手架场景下是错的。新项目刚生成时，index.html 和组件级 HTML（如 src/App.vue 中的 template）可能已带基础结构，但未必符合团队规范（比如缺 <meta charset="utf-8"> 或用了单引号属性值）。必须在 create 命令执行完毕、文件写入磁盘后立刻校验。
- 在脚手架主流程末尾插入
npx htmlhint "src/**/*.html" "public/index.html" --config .htmlhintrc，并设为非阻断式（用|| true避免因初版模板不合规而中断创建） - 若检测到错误，只打印警告（
console.warn），不 throw，同时附带修复建议（如“缺少title标签 → 在中添加<title>My App</title>”） - 对 Vue/React 模板，需额外配置
htmlhint的html-req-lang和attr-lowercase规则，否则<template></template>块内 JSX 属性（如onClick）会被误判
.htmlhintrc 配置如何适配多框架模板
同一份 .htmlhintrc 无法通吃所有前端框架。Vue 单文件组件里的 <template></template> 不是标准 HTML；React 的 JSX 更是语法超集。硬套默认规则会导致大量误报，比如 attr-no-duplication 在 Vue 的 v-bind: 语法下失效。
- 脚手架生成时，根据用户选择的框架动态写入不同配置：选 Vue 则启用
"vue/html-indent": true插件（需额外安装htmlhint-vue），选 React 则禁用tag-pair（JSX 允许自闭合标签） - 核心规则保留通用底线：
doctype-first、id-unique、alt-require，这些与框架无关 - 避免启用
attr-value-double-quotes—— Vue 模板中:class="{ active: isActive }"的双大括号内若强制双引号，会破坏表达式解析
为什么不能只靠 pre-commit 钩子做 HTML 质量守门
husky + lint-staged 是常见做法，但它对 HTML 的覆盖有致命盲区：新生成的 index.html 或组件文件，如果开发者没修改就直接 commit，lint-staged 根本不会扫描它们——因为 Git 认为这是“未跟踪文件”，不在暂存区。
- 脚手架必须在
create后主动运行一次全量检查，覆盖**/*.html和**/*.vue中的<template></template> - pre-commit 钩子只负责后续增量修改，检查范围限定为
git diff --cached --name-only | grep -E '\.(html|vue)$' - CI 流程里仍需保留 HTMLHint，但应跳过首次 commit（可通过
git rev-list --count HEAD判断是否为初始提交）
真正难的是规则收敛：同一个 img 标签，在 Vue 模板里要检查 v-bind:src 是否响应式，在 React 里要看 src={logo} 是否有 fallback，而纯 HTML 只需 alt。脚手架做不到全自动适配，得靠配置层暴露规则开关，让使用者自己决定严格程度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
