Prettier仅格式化不校验HTML合法性，无法捕获闭合错位、缺alt、ARIA属性缺失等语义错误；必须用html-validate或tidy等工具进行W3C和WCAG标准校验。
HTML 文件在提交前不校验，会导致大量格式混乱、语义错误、可访问性缺失的代码进入主干——尤其在多人协作或 CMS/SSR 混合渲染项目中，prettier 单独处理不够，html-validate 或 tidy 才是真正兜底的检查手段。
为什么 pre-commit 里不能只跑 Prettier？
Prettier 只做格式化，不校验 HTML 合法性。比如：<div></span> 闭合错位、<img> 缺 alt、role="button" 没配 tabindex 或事件监听器，Prettier 完全无视。这类问题必须靠语义校验工具捕获。
-
html-validate基于 W3C 标准和可访问性（WCAG）规则，支持自定义配置，输出清晰错误定位 -
tidy更轻量，适合快速修复基础语法，但规则粒度粗、不支持现代 ARIA 属性校验 - 若项目已用
eslint-plugin-html，它只覆盖内联 JS 和模板字符串里的 HTML 片段，无法校验独立.html文件
lint-staged 配置 HTML 校验的正确写法
关键点：匹配路径要精确，命令执行顺序要合理，失败必须中断提交。
- 在
package.json的lint-staged字段中，明确声明*.{html,htm}模式，避免被*.{js,ts}规则误吞 - 推荐组合：
"*.{html,htm}": ["html-validate --fix", "prettier --write"]—— 先语义校验并自动修正常见结构问题，再统一格式 - 如果
html-validate报错（如缺失lang属性），lint-staged默认会终止流程，不执行后续命令；无需额外加&&或|| - 注意：某些旧版
html-validateCLI 不支持--fix，需升级到 v4.0+；否则去掉该参数，仅保留只读校验
Husky pre-commit 钩子失效的常见原因
不是配置写了就生效，本地 Git 钩子链路容易断在三个环节。
立即学习“前端免费学习笔记（深入）”；
-
npx husky add .husky/pre-commit "npx lint-staged"后，检查.husky/pre-commit文件首行是否为#!/usr/bin/env sh，Windows 用户可能生成#!/bin/sh导致权限拒绝 -
prepare脚本没生效：确认package.json里有"prepare": "husky install"，且团队成员运行过npm install（或pnpm install）——只有这时husky install才真正写入.git/hooks/ - Git 版本低于 2.9：老版本不支持
core.hooksPath，Husky 会退回到手动复制钩子逻辑，若.git/hooks/下已有同名文件（如pre-commit.sample），可能被覆盖失败
HTML 校验规则容易被忽略的细节
开箱即用的 html-validate 规则集（如 html-validate:recommended）对 Vue/React 项目并不友好——它默认把 v-if、v-for、jsx 当作非法属性报错。
- 必须在
.htmlvalidate.json中启用对应插件："plugins": ["html-validate-vue"]或["html-validate-react"] - 若项目含服务端模板（如 EJS、Nunjucks），需关闭
no-unknown-attributes规则，或白名单添加include、extends等指令 -
html-validate默认不检查内联 CSS/JS，如需校验<style>里的display: flex是否兼容目标浏览器，得额外集成stylelint并在lint-staged中单独配置*.html的stylelint子任务
真正卡住落地的，从来不是工具链拼装，而是 HTML 校验规则与框架/模板引擎的语义对齐——没配对插件的 html-validate 在 Vue 项目里基本等于废柴。
