lint-staged 需显式配置 *.html 等 glob 模式匹配 HTML 文件，如 "*.html": ["prettier --write"]，并确保工具支持该后缀；它本身不检查文件，仅将路径传递给下游工具（如 Prettier、htmlhint），且仅作用于已 git add 的暂存文件。
lint-staged 配置里怎么匹配 HTML 文件
HTML 文件默认不在 lint-staged 的常见匹配模式中（比如 *.{js,ts,jsx,tsx}），必须显式声明。否则即使你装了 prettier 或 htmlhint，它也不会对 .html 文件执行任何操作。
正确写法是把 .html 加进 glob 模式里，并确保对应工具支持该后缀：
-
"*.html"：匹配项目根目录下的 HTML 文件 -
"src/**/*.html"：匹配src下所有嵌套层级的 HTML -
"**/*.{html,htm}"：同时覆盖.htm（少见但存在）
注意：路径通配符必须用双引号包裹，否则 JSON 解析会失败；单引号或不加引号在 package.json 中非法。
HTML 文件该用什么命令做检查或格式化
lint-staged 本身不检查 HTML，它只负责把文件路径传给下游工具。实际干活的是你配置的命令，常见组合有：
-
prettier --write：最常用，支持 HTML 格式化，但需确认 Prettier 版本 ≥ 2.0（旧版对自闭合标签、属性排序等处理不一致） -
htmlhint --format=compact：做静态校验（如是否缺少alt、lang属性），需提前安装htmlhint -
eslint --ext .html --fix：仅当使用eslint-plugin-html时才有效，适合内联 JS/CSS 的模板类 HTML
示例配置（package.json）：
"lint-staged": {
"*.html": ["prettier --write"],
"src/**/*.html": ["htmlhint --format=compact"]
}
⚠️ 不要混用多个命令处理同一组文件（比如 ["prettier --write", "htmlhint"]），因为 prettier 修改文件后，htmlhint 实际检查的是修改后的版本——这可能导致误报或漏报。
为什么改了 HTML 却没触发 lint-staged
常见原因不是配置错，而是文件根本没进 Git 暂存区。lint-staged 只响应 git add 后的文件，以下情况会导致“静默失效”：
- 你编辑了
index.html，但忘记运行git add index.html - 文件被
.gitignore忽略（比如某些构建产物目录下的 HTML） - glob 模式写成
**/*.html，但实际文件路径含 Windows 风格反斜杠（src\pages\home.html），部分旧版 Node 不兼容 - 使用了 Husky v8+，但
.husky/pre-commit脚本里没加set -e，导致前置命令失败后 lint-staged 仍继续执行（看似运行了，实则跳过）
验证方式：手动运行 npx lint-staged --debug，它会打印出实际匹配到的文件列表——这是最直接的排查手段。
HTML + Prettier 的坑：格式化后破坏构建或渲染
Prettier 对 HTML 的格式化可能影响某些构建流程或运行时行为，尤其在以下场景：
- Vue/Svelte/Angular 模板中，Prettier 默认会把自闭合标签（如
<img>）转为<img>，而某些 loader 要求严格自闭合 - 服务端渲染（SSR）项目中，格式化插入的空格/换行可能改变 DOM 结构，导致 hydration mismatch
-
prettier.config.js里没设htmlWhitespaceSensitivity: "ignore"，导致文本节点间空白被重排
解决方案不是禁用 Prettier，而是精准控制：
在 prettier.config.js 中显式锁定 HTML 行为：
module.exports = {
overrides: [
{
files: ["*.html", "*.htm"],
options: {
htmlWhitespaceSensitivity: "css",
bracketSameLine: false
}
}
]
};
真正容易被忽略的是：HTML 文件的编码。如果文件是 GBK 或 UTF-8 with BOM，Prettier 可能解析失败并跳过——务必统一用 UTF-8 without BOM 保存所有 HTML 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
