正确做法是将 HTMLHint 作为 devDependencies 安装，使用固定命名的 .htmlhintrc 配置文件置于项目根目录，并在 CI 中通过 npm ci + npx htmlhint --format=unix 稳定执行校验。
团队里 HTML 格式和语义不一致，靠人盯人没用；必须把校验规则打包进项目、自动触发、CI 拦截——否则每次 PR 都在修格式。
怎么让 HTMLHint 规则随项目一起分发
本地装全局 htmlhint 命令会导致版本不一致、规则难同步。正确做法是把校验能力“嵌入项目”本身：
- 用
npm install --save-dev htmlhint安装到devDependencies，所有人npm install后即拥有同一版本 - 配置文件必须叫
.htmlhintrc（不能是htmlhint.json或其他名），且放在项目根目录，htmlhint才会自动识别 - 规则里禁用
id-unique要谨慎：SSR/React/Vue 渲染时动态生成 ID 很常见，直接开启会误报；建议改用"id-class-value": "dash"等更安全的替代检查 - 配合
"files": ["src/**/*.html", "public/**/*.html"]明确扫描范围，避免误扫node_modules或构建产物
为什么 Prettier + HTMLHint 组合不能只靠编辑器自动保存
VS Code 保存时自动格式化（Prettier）+ 实时提示（HTMLHint）看着很美，但实际协作中三个坑很致命：
- 新成员打开项目没装插件，或插件被禁用，
.htmlhintrc形同虚设 - Prettier 只管格式（缩进、引号），不管语义错误，比如
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a> <p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div>text</div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>这种嵌套违规，它照常格式化，但 W3C 会报错 - 编辑器提示是“软提醒”，开发者可无视；而 CI 里
npx htmlhint .失败会直接阻断合并，这才是强约束
CI 中怎么稳定运行 HTML 校验而不被环境卡住
很多团队在 GitHub Actions 或 GitLab CI 里跑 htmlhint 报错，不是规则问题，而是执行环境缺失关键依赖：
- 确保 CI 步骤里先执行
npm ci（不是npm install），避免 lockfile 和 node_modules 不一致 - 加
--format=unix参数，避免 Windows CI 机器输出 ANSI 颜色码导致解析失败 - 对 SSR 页面或含 JS 渲染的 HTML，别用
htmlhint直接扫dist/—— 那是运行时 DOM，不是源码；应只校验src/或templates/下手写的原始 HTML - 若需验证最终渲染结果的合规性，换用
vnu.jar（W3C Validator 的命令行版）：它基于真实解析器，能发现<img alt>缺值、<meta charset="utf8">拼写错误等静态分析漏掉的问题
团队共享规则时最容易被忽略的细节
规则文件进了 git，不代表它真被用了。下面三点不检查，等于白配：
-
.htmlhintrc里写了"attr-lowercase": true，但有人提交了<div class="foo"></div>却没报错？检查是否漏了"tagname-lowercase": true—— 这俩是独立开关 - 团队用 Vue/React，但
.htmlhintrc没配"files"排除**/*.vue，结果在<template>块里报一堆“img缺alt”——因为 HTMLHint 把它当纯 HTML 解析了 - CI 脚本写的是
htmlhint *.html，但项目里 HTML 全在子目录，实际一条文件都没扫到；应统一用htmlhint "**/*.html"并加引号防 shell 展开
