htmlhint能覆盖微前端HTML模板，但仅限纯HTML文件；对Vue/React模板中的内联HTML（如v-html、dangerouslySetInnerHTML）无感知，需搭配eslint-plugin-html处理组件内HTML片段，二者职责互补、不可替代。
微服务架构下，HTML 文件常分散在多个子应用中，手动检查不现实；必须用 htmlhint 或 eslint-plugin-html 做自动化检测，否则模板错漏会直接暴露到线上。
htmlhint 能否覆盖微前端 HTML 模板？
可以，但要注意它默认只校验纯 HTML，对 Vue/React 模板中的内联 HTML（如 v-html、dangerouslySetInnerHTML）无感知。常见错误现象是：组件里拼接的 HTML 字符串被忽略，导致 XSS 风险漏检。
- 用
htmlhint时，需显式指定--config .htmlhintrc并确保src/**/*.{html,htm}被纳入扫描范围 - 若项目含 Vue 单文件组件，
htmlhint对<template>块无效，必须换用eslint-plugin-html+eslint统一处理 -
htmlhint的attr-bans规则能拦截onclick、onload等危险属性，但对@click（Vue）或onClick（React）不生效
eslint-plugin-html 怎么正确加载 HTML 片段？
它本质是把 HTML 内容提取出来交给 ESLint 解析，所以必须配对使用 eslint 的 parser 和 processor，否则报 ParseError: Unexpected token。
- 安装：
npm install --save-dev eslint eslint-plugin-html - 在
.eslintrc.js中声明：plugins: ["html"]，并添加processor: "html/eslint-plugin"到对应文件匹配项 - 关键配置示例：
overrides: [{ files: ["*.html"], processor: "html/eslint-plugin", rules: { "no-unused-vars": "error", "no-undef": "error" } }] - 注意：它不能校验 HTML 属性拼写（如
clss错写成class），这类问题仍需htmlhint补位
微服务场景下如何避免 lint 规则冲突？
各子应用可能用不同框架（React/Vue/Angular），共用一套 HTML lint 规则容易误报。比如 Vue 的 v-if、React 的 className 在纯 HTML 规则下全是“非法属性”。
立即学习“前端免费学习笔记（深入）”；
- 按子应用目录隔离配置：在
app-react/.eslintrc.js和app-vue/.eslintrc.js中分别定义processor和rules - 统一入口用
eslint --config ./app-react/.eslintrc.js app-react/src/**/*.html单独执行，别跑全量 - 禁用全局
html-validate类规则（如attr-name-style），改用框架专用插件（eslint-plugin-vue/eslint-plugin-react）接管模板校验 - CI 中每个子应用的 lint 步骤应独立运行、独立失败，避免一个子应用的问题阻塞整个流水线
真正麻烦的是 HTML 与 JS 交界处——比如动态插入的 DOM 字符串、innerHTML 拼接、模板字符串里的 HTML 片段。这些地方既不在 htmlhint 范围内，ESLint 默认 parser 也解析不了，得靠自定义 rule 或手动 code review 来兜底。
