HTMLHint真生效需在VS Code中关闭内置验证器、启用.htmlhintrc基础规则、禁用全局依赖并用npx执行；prettier与htmlhint须职责分离且引号配置一致；husky pre-commit应仅校验git改动的HTML文件，避免全量扫描。
HTML 工程化工具链不是“加一堆插件就完事”，而是让规范在保存、提交、构建三个关键节点自动拦截问题。没落地的规则等于没写。
VS Code 里 HTMLHint 怎么配才真生效
很多人装了 HTMLHint 扩展但没报错，其实是没启用校验或配置被覆盖。默认情况下 VS Code 的内置 HTML 验证器会和 HTMLHint 冲突，必须关掉前者。
- 在
settings.json中添加："html.validate.scripts": false, "html.validate.styles": false - 确保项目根目录有
.htmlhintrc，且至少启用doctype-first、tagname-lowercase、attr-lowercase这三条基础规则 - 不要依赖全局安装的 HTMLHint：团队成员本地 npm 全局装的版本可能不一致，应统一用
npx htmlhint src/*.html命令跑 - 常见错误现象：
htmlhint命令报Cannot find module 'htmlhint'—— 说明没在项目里装，不是路径问题
prettier + htmlhint 组合怎么避免互相打架
Prettier 负责格式（缩进、引号、空行），HTMLHint 负责语义和规范（标签闭合、doctype、alt 属性）。两者职责分明，但配置不当会冲突。
-
prettier的htmlWhitespaceSensitivity: "css"是安全值；设成"strict"可能误删必需的空白，导致文本节点错位 - HTMLHint 的
attr-value-double-quotes和 Prettier 的引号设置必须一致，否则保存后立刻报错又立刻修复，形成循环 - 禁用 Prettier 对
class属性的重排（它不懂 BEM），在.prettierrc加："htmlOptions": { "attributeValueDoubleQuotes": "prefer-double" } - 实际效果：保存时 Prettier 格式化 → HTMLHint 检查 → 报错项需手动修（如缺
alt），不会自动补
husky pre-commit 怎么只校验改动的 HTML 文件
全量校验 src/**/*.html 在大型项目里太慢，CI 等不起，本地提交也卡顿。得只检本次 commit 涉及的文件。
立即学习“前端免费学习笔记（深入）”；
- 用
git diff --cached --name-only --diff-filter=ACM | grep '\.html$'提取新增/修改的 HTML 文件路径 - 脚本里判断结果为空则跳过，非空则传给
htmlhint，例如：npx htmlhint $(git diff ...) - 别直接写
"pre-commit": "htmlhint src/**/*.html"—— 这样每次提交都扫全部，哪怕只改了一个 JS 文件 - 容易踩的坑：Windows 下
git diff输出路径带反斜杠，htmlhint不认，建议用cross-env或统一用 WSL
动态生成 HTML 怎么让 HTMLHint 也能管到
JS 拼接字符串、模板引擎（如 EJS、Handlebars）输出的 HTML，HTMLHint 默认不扫描。这部分最容易出语义错误，比如 <main></main> 嵌套在 <nav></nav> 里。
- 对构建产物（如
dist/index.html）跑一次htmlhint dist/**/*.html，作为 CI 最后一道检查 - 模板文件（
.ejs、.hbs）本身不能直接被 HTMLHint 读，需配合插件：EJS 用eslint-plugin-html+eslint，Handlebars 用ember-template-lint - 关键点：所有
data-*属性必须带注释说明来源，HTMLHint 不管这个，但人工 CR 时这是必查项 —— 比如<div data-user-id="<%= user.id %>"><!-- 后端 API 返回，不可为空 --> - 性能影响：CI 阶段校验构建产物比校验源模板更准，但耗时多 2–3 秒，需权衡
真正卡住质量的不是工具没装，而是规则没进 pipeline、没进编辑器、没进 commit 钩子。动态模板、多层 include、JS 注入 DOM 这些场景，工具链必须分层覆盖，漏一层就等于放行一个隐患。
