pre-commit 用 html-validate 检查暂存区 html 文件结构与语义，commit-msg 强制 html 相关提交带 feat(html): 等前缀，pre-push 构建后验证 dist/ 下产物完整性，husky 或 setup-hooks.sh 统一团队钩子。
pre-commit 里怎么检查 HTML 文件格式和语义问题
HTML 不是编译型语言，但错误的结构、缺失的闭合标签、不规范的属性写法，会在运行时暴露，且影响可访问性（a11y）和 SEO。pre-commit 钩子必须只检查暂存区里的 HTML 文件，避免全量扫描拖慢提交速度。
- 用
git diff --cached --name-only --diff-filter=ACM获取被修改的 HTML 文件路径，过滤出*.html和*.htm - 推荐用
html-validate（非tidy或htmlhint）：它支持现代 HTML5、可配置规则集（如a11y、seo、security），且能输出机器可读结果 - 命令示例：
npx html-validate --format json --config .htmlvalidate.json $STAGED_HTML_FILES，配合--quiet抑制成功时的输出 - 注意：不要在钩子里调
prettier --write自动修复 HTML —— 它可能重排缩进或属性顺序，引发无意义 diff；应只做--check阻断
commit-msg 钩子必须单独处理 HTML 相关提交说明
HTML 文件常伴随样式调整、模板重构、SEO 标签增删等变更，这类提交若只写“update index.html”，后续难以追溯意图。不能把提交信息校验塞进 pre-commit，否则会混入文件内容检查逻辑，导致错误归因。
- 启用独立的
commit-msg钩子：复制.git/hooks/commit-msg.sample并赋权 - 对含 HTML 变更的提交，强制要求前缀：
feat(html): add meta description、fix(template): close missing - 可用
git rev-parse --verify HEAD > /dev/null 2>&1 && git show -s --format=%B HEAD | grep -q "^\(feat\|fix\|refactor\|docs\)(html):" || exit 1做基础匹配 - 别依赖正则穷举所有 HTML 关键词（如
template、jsx、handlebars）——易漏，也难维护；聚焦变更类型而非文件后缀更可靠
为什么 pre-push 才适合检查 HTML 构建产物完整性
pre-commit 只能看源码，但 HTML 的真实问题常出现在构建后：比如 Webpack/Vite 插件误删 <script></script> 标签、CSS-in-JS 注入失败导致 class 丢失、动态 import() 路径解析错误。这些无法在源码阶段发现，但又不能等到 CI 才暴露。
-
pre-push是唯一能在本地触发构建并验证产物的合理时机：运行npm run build，再用html-validate检查dist/index.html - 务必加保护：先判断是否真有
dist/目录（[ -d dist ] || { echo "❌ dist not built"; exit 1; }），避免每次 push 都跑构建 - 禁用耗时操作：不要在
pre-push里启动本地 server 或做 Puppeteer 渲染截图 —— 这属于 CI 范畴，本地卡住会打断协作节奏 - Windows 用户注意：
pre-push脚本第一行必须是#!/usr/bin/env bash，否则npm run build可能找不到 shell 环境
团队同步 hooks 的实际落地难点在哪
就算钩子脚本写得再严谨，如果每个成员的 .git/hooks/ 目录内容不一致，整个质量门禁就形同虚设。这不是技术问题，而是协作惯性问题。
- 原生 Git Hooks 不随仓库提交，
.git是本地私有目录 —— 这是根本限制，无法绕过 -
husky是目前最稳的解法：它把钩子注册到package.json的prepare脚本里，yarn install或npm ci后自动写入.husky/并软链到.git/hooks/ - 但要注意：
huskyv8+ 默认使用core.hooksPath，某些旧版 IDE（如 VS Code 1.80 之前）可能不识别，需手动在设置里开启"git.legacyVersion": false - 如果项目不用 npm/yarn（比如纯 Python + HTML 的静态站），就得用
setup-hooks.sh：脚本里明确cp hooks/* .git/hooks/ && chmod +x .git/hooks/*，再绑定到post-checkout和post-merge钩子
真正卡点的从来不是“能不能写出来”，而是“所有人是否在同一套规则下运行”。HTML 检查容易流于形式，因为它的错误不像 TypeScript 类型错误那样立刻报红 —— 缺少 alt 属性、错误的 aria-* 用法、嵌套不当的 <section></section>，往往要等 Lighthouse 扫描或用户反馈才暴露。所以钩子的阻断逻辑必须足够强硬，且团队要接受“提交失败是常态，直到习惯为止”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
