HTMLHint规则需显式嵌入CI/CD流水线：在构建阶段执行npx htmlhint src/**/*.html --config .htmlhintrc，确保配置文件位于项目根目录并启用tag-pair、attr-lowercase等关键规则，避免因环境缺失或路径错误导致检查失效。
HTMLHint 规则如何嵌入 CI/CD 流水线？
直接在构建阶段跑 htmlhint，比人工检查快且不遗漏。关键不是“能不能跑”，而是规则是否贴合团队真实约束。
常见错误现象：本地 htmlhint 检出 20 个 warning，CI 上却一个都不报 —— 很可能是 CI 环境没装 htmlhint，或配置文件路径不对（比如用了 .htmlhintrc，但 CI 启动目录不是项目根目录）。
- 确保 CI 脚本中显式执行
npx htmlhint src/**/*.html --config .htmlhintrc，避免依赖全局安装 - 把
.htmlhintrc放在项目根目录，并在配置里明确启用关键规则："attr-lowercase"、"attr-no-duplication"、"tag-pair"、"id-unique" - 对已有老项目，先设
"reporter": "unix"输出纯文本，再用grep -q "error"控制构建失败阈值，别一上来就 strict mode
怎么让 HTML 质量检查和 Figma2Code 流程联动？
Figma2Code 生成的代码常带冗余 div、缺 alt、乱用 class 名 —— 这不是模型问题，是缺乏校验出口。必须把质量卡点放在生成后、提交前。
使用场景：设计师提 PR 前自动触发 HTML 检查，而不是等 QA 发现语义错误才返工。
立即学习“前端免费学习笔记（深入）”；
- 在 Figma2Code 插件导出后，加一层脚本调用
htmlhint --config ./config/htmlhint.figma.json，该配置只开"attr-required"和"img-alt-req"等强约束项 - 把
alt缺失、button无type属性这类问题标为 error，其余如 class 命名风格设为 warning - 注意：Figma2Code 输出的 HTML 常含内联 style，
htmlhint默认不校验它，需额外启用"inline-style-disabled"规则并配合 CSS lint 工具协同判断
W3C 验证器和 HTMLHint 的结果为什么经常不一致？
因为它们检查维度不同：W3C 验证器盯的是“能否被标准解析器接受”，htmlhint 瞄的是“是否符合团队工程规范”。两者都报错，说明真有问题；只有一边报，得看具体规则意图。
典型差异：
-
<div><p>xxx</p></div>：W3C 允许，htmlhint若启用了"disallowed-tags"可能警告 -
<img src="x.jpg">：W3C 不报错，htmlhint的"img-alt-req"会标 error -
<button onclick="alert(1)">：W3C 接受，htmlhint的"inline-script-disabled"会拦截
建议策略：W3C 验证用于上线前兜底，htmlhint 用于日常开发拦截 —— 别拿 W3C 当质量唯一标尺。
HTML 质量指标怎么参与研发效能平台的数据看板？
不能只存“通过/不通过”布尔值。要拆解成可归因、可下钻的指标，否则进不了效能平台的度量闭环。
容易踩的坑：把 htmlhint 输出直接扔进 Prometheus，结果全是字符串，没法聚合分析。
- 用
htmlhint --format json输出结构化数据，再用简单脚本提取errors.length、warnings.length、按文件路径分组的issues_per_file - 关键字段打标：标记来源（
ci/precommit/figma2code）、所属业务域（marketing/dashboard）、严重等级（critical/high/medium） - 效能平台侧接入时，重点追踪
critical_issues_per_pr和avg_fix_time_hours，这两个指标和交付节奏强相关，其他花哨指标反而干扰判断
真正难的不是采集，是让每个 warning 都能反向定位到具体人、具体提交、具体设计稿节点 —— 否则指标只是数字，不是改进抓手。
