eslint-plugin-html 常报错却查不到源头，因其默认解析器将 <template> 当作纯 HTML 处理，无法识别 Vue 模板语法（如 v-if、{{ item.name }}），导致属性名校验失败、插值被误判为文本；需在 .eslintrc.js 的 overrides 中配置 files: ['*.vue']、parser: 'vue-eslint-parser'、parserOptions.parser 指向 @typescript-eslint/parser 或 @babel/eslint-parser，并确保 processor: 'vue/.vue'，否则 .vue 文件不会交由 Vue 解析器处理。
为什么 eslint-plugin-html 在 Vue 项目里常报错却查不到源头？
因为它的默认解析器把 <template> 当成纯 HTML 处理，而 Vue 模板语法（比如 v-if、{{ item.name }}）根本不是标准 HTML —— 这会导致属性名校验失败、插值表达式被误判为文本内容。
- 临时解法：在
.eslintrc.js中给overrides加一条规则，指定parser: 'vue-eslint-parser'，并让parserOptions.parser指向'@typescript-eslint/parser'（或babel-eslint） - 关键配置项必须包含：
files: ['*.vue']、processor: 'vue/.vue'，否则 ESLint 根本不会把.vue文件交给 Vue 解析器处理 - 如果用了 Vite，还要确认
eslint-plugin-vue版本 ≥ 9.0.0，老版本对<script setup>的支持不完整，会漏检defineProps类型声明问题
prettier 格式化后 <img> 的 alt 属性总被删掉怎么办？
这不是 Prettier 的 bug，是它默认把未知属性（比如自定义的 data-testid）和“非标准”属性（如未声明的 alt）一并清理——但 alt 是合法 HTML5 属性，问题出在 Prettier 不识别你当前 HTML 版本或模板引擎上下文。
- 在
.prettierrc中显式启用："htmlWhitespaceSensitivity": "css"（避免因换行导致属性被吞），并添加"htmlOptions": { "attributeSeparator": "auto" } - 更稳妥的做法：用
prettier-plugin-astro或prettier-plugin-vue替代基础 Prettier，它们内置了对框架模板的语义理解，能保留alt、srcset等关键属性 - 检查是否启用了
prettier-ignore注释但写错了位置——它必须紧贴在要忽略的代码行上方，且不能跨标签生效
CI 流水线里 html-validate 总因 “inline style” 失败，可业务组件就是需要动态颜色
HTML 验证工具默认把所有 style 属性当硬编码样式拦截，但它无法区分 style="color: red" 和 :style="{ color: textColor }" —— 后者是 Vue 的响应式绑定，根本不该由 HTML 层校验。
- 在
html-validate.json的rules里禁用no-inline-style，改用vue/no-unused-vars和vue/no-v-html控制真实风险点 - 若必须保留 HTML 层校验，用
ignore配置跳过特定文件路径，例如"**/legacy-components/*.html"，别盲目全局关闭 - 注意
html-validate的customElement配置项：Vue 组件名（如<user-card>）需显式注册，否则会被当成非法标签报错
本地开发时 lint-staged 不触发 HTML 校验，但 git commit 后 CI 又报错
根本原因是 lint-staged 默认只监听 *.{js,ts,vue}，而 HTML 文件（包括 .html、.htm、甚至 .svelte 模板）没被纳入匹配范围，本地根本没跑校验。
立即学习“前端免费学习笔记（深入）”；
- 修改
lint-staged.config.js，加入："*.{html,htm}": ["html-validate --output-format=string"]，注意路径通配符必须用单引号包裹，否则 Shell 会提前展开 - 如果项目混用 Markdown 文档，加一行
"*.md": ["remark-lint"]，避免链接失效类问题漏检 - 验证是否生效：执行
npx lint-staged --debug，看输出里有没有列出你刚修改的 HTML 文件 —— 没有就说明 glob 匹配失败，常见原因是 VS Code 插件自动保存时生成了临时文件，被lint-staged错误过滤了
required 属性是否存在，而不是只靠 CI 卡住 PR。这点没法靠工具链自动补全，得在封装 useForm 时手动注入校验逻辑。 
