htmlhint在vite开发阶段不生效，因其默认不处理html文件lint，需通过npm script触发而非集成进vite dev生命周期；正确做法是配置lint脚本并结合.htmlhintrc规则，在ci中显式指定路径和编码以避免漏检。
HTMLHint 在 Vite 开发阶段不生效？检查 htmlhint 是否被误当构建依赖
直接在 vite.config.js 里 require('htmlhint') 或调用其 CLI 是无效的——Vite 默认不处理 HTML 文件的 lint，也不会自动拦截 .html 请求做校验。它只对模块化资源（.js、.vue、.ts）做按需编译，HTML 是静态服务，不会触发任何插件逻辑。
常见错误是把 htmlhint 当成类似 vite-plugin-vue 那样的运行时插件来用，结果 dev server 启动了，但改了 HTML 完全没提示。
- 正确做法：用 npm script 触发
htmlhint，而非试图集成进 Vite 的 dev 生命周期 - 必须加
--fix才能自动修复（但仅限部分规则，如attr-lowercase） - 若项目含
.vue文件，htmlhint默认不检查其中的 template，需额外配置htmlhintrc启用html-req-lang等规则并配合vite-plugin-html插件提取模板
Webpack 中 HTMLHint 总报 Parse error: Unexpected token
这是 html-loader 和 htmlhint 冲突的典型表现：Webpack 先用 html-loader 把 HTML 转成字符串或 DOM 结构，再传给 htmlhint 时已不是原始文本，导致解析失败。
根本原因在于 Webpack 的 loader 链是单向串行的，而 htmlhint 需要原始 HTML 字符串才能分析语义结构。
- 解决方案：把
htmlhint放到构建流程最外层，即用webpack-shell-plugin或npm-run-all在webpack --watch启动前单独跑htmlhint src/**/*.html - 不要用
eslint-plugin-html替代——它只检查内联 script/style，不校验标签嵌套、属性缺失等结构性问题 - 如果必须在 Webpack 内部做，得写自定义 plugin，在
compilation.hooks.processAssets阶段读取原始sources，但会显著拖慢构建速度
Vite + HTMLHint 的 CI/CD 流水线怎么避免漏检？
很多人只在本地跑 npm run lint:html，但 CI 中常因 glob pattern 不匹配导致跳过某些目录（比如 public/*.html 或动态生成的 dist/index.html）。
htmlhint 默认不递归检查子目录下的 HTML，且对文件编码敏感（如 UTF-8-BOM 会导致规则失效）。
- CI 脚本中显式指定路径：
htmlhint "src/**/*.html" "public/*.html" --config .htmlhintrc，引号防止 shell 展开失败 - 在
.htmlhintrc中强制声明"encoding": "utf8"，避免 BOM 干扰 - 若使用 GitHub Actions，注意默认 checkout 的 line-ending 是 CRLF，需加
git config --global core.autocrlf input步骤，否则attr-no-duplication等规则可能误报
HTMLHint 规则选哪些才真正防线上问题？
40+ 条内置规则里，超过一半是风格建议（如 attr-order），对线上稳定性无实质影响。真正值得开的只有 6–8 条核心项，其余全关能提速 3 倍以上。
重点不是“全开”，而是守住底线：不阻断渲染、不触发 XSS、不破坏可访问性。
- 必开：
attr-required（img缺alt）、attr-no-duplication（重复属性）、head-script-disabled（阻止head里执行 JS）、doctype-first - 慎开：
id-unique（SPA 中动态生成 ID 易误报）、script-src（需配合 CSP 配置，单独开无意义） - 禁用：
attr-lowercase（Vue 模板中v-if大小写混合合法）、attr-quote-style（JSX 中单双引号混用常见）
规则冲突比想象中更频繁——比如 vue-eslint-parser 解析后的 AST 和 htmlhint 的 DOM 树不一致，最终生效的是你最后执行的那个工具。别指望一个配置文件能同时管住 Vue 模板和纯 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
