微小团队只需守住结构合法性、可访问性底线、跨端兼容性锚点三类必卡点;pre-commit仅校验暂存区HTML文件,CI检查构建产物dist/,VS Code实时标红并提供带模板的修复建议。

微小团队不需要复杂规则,只要守住三类必卡点:结构合法性、可访问性底线、跨端兼容性锚点。其他全是干扰项。
pre-commit 钩子只扫本次修改的 HTML 文件
全量扫描 src/ 下所有 .html 会拖慢提交,新人直接关掉 husky。必须只检查 git status 中标记为 modified / added 的 HTML 文件。
- 用
git diff --cached --name-only --diff-filter=ACM提取暂存区里的 HTML 路径 - 配合
html-validate(不是 htmlhint)执行:npx html-validate --config .htmlvalidate.json $STAGED_FILES - 配置里只开三条 error 级规则:
"require-title"、"require-alt-attribute"、"no-duplicate-id" - 避免用
--fix自动修复——它可能重排属性顺序,引发无意义 diff;只做--check阻断
CI 流水线中验证构建产物而非源码
源码没问题,不代表 dist/ 里没被插件吃掉
- 在 GitHub Actions 的 deploy 步骤前加:
npm run build && npx html-validate dist/**/*.html - 重点检查:
strings.Contains(htmlBody, "<title>")</title>、strings.Contains(htmlBody, 'charset="utf-8"')、!strings.Contains(htmlBody, "style=") - 不要用 jsdom 或 cheerio——冷启动延迟高、内存占用大;
htmlq更轻:htmlq 'head title' dist/index.html就够 - 若检测失败,返回 HTTP 500 并附带行号快照,不合并 PR
VS Code 编辑器内实时标红 + 修复建议
非前端成员(如运营改 landing page)不会看 CLI 报错,必须让错误出现在保存瞬间,且带上下文修复指引。
立即学习“前端免费学习笔记(深入)”;
- VS Code settings.json 中启用:
"html.validate.scripts": true、"html.suggest.html5": true - 安装 HTMLHint 插件,但配置仅启用:
"tag-pair": true、"attr-value-double-quotes": true、"id-class-value": "dash" - 错误提示不能只写“Missing alt”,要定位到具体节点并给模板:
<img src="logo.svg"> → <img src="logo.svg" alt="公司 logo"> - 禁用全局 Prettier 配置:
"prettier.resolveGlobalModules": false,防止本地格式化覆盖项目规则
最容易被忽略的是动态渲染场景:React 的 dangerouslySetInnerHTML 或服务端模板注入的内容,不会出现在源码里,却会污染最终 DOM。红牌检查必须在 hydration 完成后执行,否则 aria-label 缺失这类问题永远漏检。



















