HTML Lint 规则必须按文件类型分治，否则必然误报；需为.vue、.njk等文件配置专属规则，禁用不适用检查，避免将v-if等框架语法误判为非法，并通过目录隔离实现微服务多子应用的精准校验。
HTML Lint 规则必须按文件类型分治，否则必然误报——不是规则不够多，而是没区分 .html、.vue、.njk 的语义上下文。
htmllint 怎么避免把 v-if 当成非法属性？
默认配置下 htmllint 对所有 .html 后缀文件一视同仁，但 v-if="show" 在 Vue 模板里合法，在纯 HTML 里非法。它不识别文件类型，只认后缀，所以必须用配置隔离。
- 新建
.htmllintrc.vue，关掉attr-name和attr-value-not-empty，这两条是误报主力 - 加
"attr-bans": ["v-", "data-v-"]，比全局关规则更精准，只跳过 Vue 相关前缀 - 设
"doctype": "none"，禁用 DOCTYPE 校验——Vue 单文件组件的<template>块里本来就不该有<!DOCTYPE html> - CI 中执行命令要显式指定配置：
htmllint --config .htmllintrc.vue src/**/*.vue
eslint-plugin-html 能否校验 <template> 块里的 HTML？
不能直接校验。它只提取 <script> 和 <style> 块交给 ESLint，对 <template> 内容无感知。真正起作用的是 eslint-plugin-vue 或 eslint-plugin-react。
- 若用 Vue，必须配
eslint-plugin-vue，并启用vue/html-closing-bracket-newline等模板专属规则 -
eslint-plugin-html只适合处理独立.html文件或内联 HTML 字符串（如v-html绑定值） - 对
dangerouslySetInnerHTML这类 React 场景，需配合eslint-plugin-react的no-danger规则，而非依赖 HTML 层检查 - 若强行让
eslint-plugin-html处理.vue，会报ParseError: Unexpected token，因它无法解析<template>语法
为什么 img-req-alt 必须保留，而 indent-style 可以关？
前者防运行时缺陷，后者只影响可读性。Lint 规则要分层：硬性约束守住底线，风格规则交给 Prettier 统一格式化。
立即学习“前端免费学习笔记（深入）”；
-
img-req-alt不只是可访问性要求——缺少alt时图片加载失败会塌陷布局，且部分 SSR 渲染器会因此抛错 -
head-script-disabled阻止<script>写在<head>里（非type="module"），避免阻塞渲染和执行顺序混乱 -
attr-quote-style: "double"是安全边界：单引号在某些旧解析器中会截断href='javascript:void(0)'，导致 XSS 漏洞 -
indent-style、max-attr-length这类规则交由prettier处理更可靠，Lint 不该重复校验
微服务架构下多个子应用共用一套 HTML lint 规则？
不能共用。React 子应用的 className、Vue 子应用的 v-model、Angular 的 *ngIf 在同一套规则下全是“非法属性”，唯一解法是按目录隔离配置。
- 每个子应用根目录放独立
.htmllintrc和.eslintrc.js，不共享上层配置 - CI 流水线中，各子应用 lint 步骤独立执行：
cd app-react && npm run lint:html，失败不传染 - 禁止在根目录
.eslintrc.js中用overrides统一匹配所有*.{html,vue,jsx}——这会导致规则混用、误报激增 - 若使用
lint-staged，必须按子应用划分 glob："app-react/**/*.{html,js}": ["eslint --config app-react/.eslintrc.js"]
真正难的不是写规则，是让每类 HTML 文件落到对应的检查路径里——漏掉一个 .njk 文件的专用配置，后续所有衍生项目都会继承这个缺口。
