html质量失控的根本原因是模板分散、校验脱节、规范无法落地，需将eslint插件集成至各子应用构建链路，统一语义标签边界、变量转义规则及构建产物校验。
微服务架构下 HTML 代码质量失控，根本原因不是“谁写的”，而是“模板分散、校验脱节、规范无法落地”。单靠人工 Review 或后期扫描，解决不了跨团队、跨仓库、跨构建流程的 HTML 一致性问题。
HTML ESLint 插件必须集成到每个子应用构建链路中
很多团队只在主应用配 eslint-plugin-html，子应用用 Vue CLI 或 Vite 脚手架默认不检查 HTML 片段，导致 v-html、template 标签、内联 data-* 属性全无约束。这不是遗漏，是构建隔离造成的盲区。
- Vue 子应用需显式安装并注册插件：
npm install eslint-plugin-html --save-dev，并在.eslintrc.js的plugins中加入'html' - Vite 项目需配置
eslintPluginHtml解析器，否则<template></template>内容被跳过 —— 这是常见静默失效点 - Webpack + HtmlWebpackPlugin 场景下，必须把
html-webpack-plugin的template路径加入 ESLint 检查范围，否则index.html文件永远不进流水线
分布式模板必须统一语义化标签使用边界
微前端中常出现多个子应用共用同一 DOM 容器（如 #subapp-container），但各自定义 <header></header>、<nav></nav>，导致嵌套层级错乱、辅助技术识别失败。语义标签不是“能用就用”，而是“谁有权用、在哪一级用”。
-
<main></main>只允许主应用声明一次，子应用禁止使用 —— 否则屏幕阅读器会误判主体内容范围 -
<section></section>和<article></article>必须由子应用内部闭环使用，不得跨子应用拼接结构（如 A 应用写<section></section>开头，B 应用补闭合标签） - 所有子应用的
lang属性必须继承自主应用根节点，禁止自行设置；否则多语言切换时语音引擎会中断
HTML 模板变量注入必须声明 escape 规则
微服务模板常通过后端渲染或 JS 动态插入 HTML 字符串，v-html、innerHTML、document.write 等操作若未强制转义，会直接绕过 CSP 并引发 XSS。这不是开发疏忽，而是模板引擎默认行为与安全策略的冲突。
- 使用
mustache或handlebars时，双花括号{{value}}默认转义，但三花括号{{{value}}}不转义 —— 所有子应用必须禁用{{{语法，并在 ESLint 中启用no-unsanitized规则 - Vue 的
v-html必须搭配v-pre或白名单过滤函数，且该函数需注册为全局 mixin，不能每个组件重复实现 - Webpack 的
html-webpack-plugin注入变量时，必须通过html-minifier-terser的ignoreCustomFragments配置排除合法动态片段，否则压缩阶段可能破坏结构
子应用 HTML 构建产物需强制校验 DOCTYPE 与编码声明
部分子应用构建后生成的 HTML 没有 或缺失 <code><meta charset="UTF-8">，看似不影响渲染，但在微前端沙箱环境（如 qiankun）中会导致 CSS 重置失效、字体 fallback 错乱、甚至 fetch 请求 header 编码异常。
- CI 流程中必须添加
html-validate工具，检查输出 HTML 是否含和 <code><meta charset="UTF-8">—— 仅靠 ESLint 无法覆盖构建产物 - qiankun 子应用的
getAppRender返回的 HTML 字符串，必须经DOMParser解析验证结构合法性，否则沙箱挂载时静默失败 - 所有子应用的
public/index.html模板应由主应用统一提供基础骨架，子应用只允许填充<div id="app"></div>区域，禁止修改 head 内容
真正难的不是写规范文档，而是让每个子应用的构建命令、CI 配置、IDE 插件都同步加载同一套 HTML 规则集 —— 一旦某个子应用的 .eslintrc.js 被覆盖或忽略，整条链路就断了。模板分散不可怕，可怕的是校验点分散。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
