html代码质量工具链起效的关键是将校验延迟控制在2秒内，核心在于vs code中htmlhint的正确配置（如启用html.validate.scripts、.htmlhintrc非空）、ci/cd中覆盖动态生成文件与模板文件、以及统一eslint管理避免规则冲突。
HTML 代码质量工具链要真正起效，核心不是堆工具，而是让检查结果在写完保存的 2 秒内就弹出来——延迟超过 5 秒，开发者就会切走，反馈环就断了。
VS Code 中 HTMLHint 实时校验失效的常见原因
很多人装了 HTMLHint 插件却收不到报错，根本不是插件没装好，而是 VS Code 默认不把 .html 文件交给 HTMLHint 处理。
- 检查设置里是否启用了
"html.validate.scripts": true（这是触发校验的关键开关） - 确认项目根目录存在
.htmlhintrc，且内容不是空对象{}—— 空配置等于没配 - 如果用的是多语言文件（如
.vue或.svelte），HTMLHint 默认不扫描，需额外配置files或改用eslint-plugin-html - VS Code 的“文件关联”可能把
.html错误映射为plaintext，右下角点击语言模式手动切回HTML
CI/CD 中 HTMLHint 检查被绕过的典型漏洞
GitHub Actions 里跑 npx htmlhint "**/*.html" 看似完整，但实际常漏掉三类文件：
- 动态生成的 HTML：比如构建产物中的
dist/index.html，默认 glob 不包含dist/目录 - 模板文件：
.njk、.ejs、.liquid等后缀未被识别，需显式加进命令：npx htmlhint "**/*.{html,njk,ejs}" - 被
.eslintignore或.gitignore掩盖的路径，HTMLHint 不读这些文件，得单独在 workflow 里用find过滤
更稳妥的做法是：先用 find . -name "*.html" -not -path "./node_modules/*" | xargs npx htmlhint，避免路径盲区。
HTMLHint 与 ESLint 共存时的规则冲突点
当项目同时启用 htmlhint 和 eslint-plugin-html，最常打架的是属性大小写和引号规则：
-
attr-lowercase（HTMLHint）和vue/html-attributes-order（ESLint Vue 插件）可能对同一行报两次错 -
attr-value-double-quotes要求class="foo"，而某些 Prettier 配置会强制单引号，导致保存即格式化、格式化即报错的死循环 - 解决方式不是关掉一个，而是统一交由 ESLint 管理：卸载 HTMLHint CLI，只保留
eslint-plugin-html，并在.eslintrc.js中明确指定overrides处理.html文件
真正卡住反馈环的，往往不是工具不会装，而是没意识到：HTML 的校验必须嵌入编辑器光标停留的上下文里——比如在 <img> 标签里敲完 src= 就该提示缺 alt，而不是等提交 PR 后才在 CI 里红着脸看报告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
