VSCode内置HTML语言服务配合html.validate.scripts和html.validate.styles开启才能校验嵌套，插件如Auto Close Tag仅补全不校验；HTMLHint和eslint-plugin-html需手动配置规则才接近合法性检查，但.vue/.ejs中须依赖Volar/Vetur；浏览器Elements面板才是终审依据。
VSCode里哪些插件真能检查嵌套合法性
没有插件能真正“检查嵌套合法性”——它们只做配对、高亮或补全，不校验HTML5内容模型。真正起作用的是VSCode内置的HTML语言服务，配合html.validate.scripts和html.validate.styles开启后，才可能触发部分结构校验。Auto Close Tag、Emmet、Auto Rename Tag这些热门插件，连<p></p>
<div></div>这种非法嵌套都不会报错，因为它们根本不读规范。
唯一接近“合法性检查”的是HTMLHint（需手动配置规则）和eslint-plugin-html（配合ESLint），但二者默认都不启用element-permitted-content这类语义规则，必须显式添加配置项才能识别<ul><div></div></ul>类错误。
-
HTMLHint需在.htmlhintrc中启用"tag-pair": true（仅查成对）和"disallow-unsafe-characters": true（防注入），但不查父容器是否允许该子元素 -
eslint-plugin-html要配合eslint-config-html-validate才能复用html-validate的规则集，否则只检JS内联脚本语法 - 所有插件在
.vue或.ejs文件的模板块中都失效，Volar或Vetur才是该场景的校验主体
为什么开了Error Squiggles还看不到嵌套错误
VSCode的Error Squiggles不是万能开关，它只对符合HTML5解析上下文的代码生效。最常被忽略的三个硬性前提：
- 文件开头必须有
<!DOCTYPE html>，否则解析器降级为Quirks Mode，<section><table></section></table>这种错位可能被当作合法 -
<meta charset="utf-8">必须放在<head>内且紧随其后（最好第一行），位置错会导致编码识别失败，进而影响标签边界判断 - 右下角状态栏必须显示
HTML，而不是Plain Text、PHP或HTML (EJS)——后者会被当作纯文本，完全跳过语言服务
如果满足以上条件仍无波浪线，执行Developer: Toggle Developer Tools，在Console里输入HTMLLanguageService看是否加载成功；若报undefined，说明语言服务崩溃，重启VSCode或禁用最近安装的插件。
立即学习“前端免费学习笔记（深入）”；
html-validate CLI比插件更可靠的原因
本地运行html-validate之所以能发现VSCode插件漏掉的问题，是因为它完整模拟浏览器HTML5解析器行为，而非依赖编辑器的简化语法树。比如：
- 它会严格按HTML5规范检查
<section>是否至少含一个<h1>–<h6>，而VSCode默认配置对此静默 - 对自定义元素如
<my-button>，需显式启用no-unknown-elements规则，否则直接跳过校验 - 支持
--max-warnings 0让CI失败，而VSCode插件无法阻断提交流程
关键命令：html-validate --config ./html-validate.json src/**/*.html。配置文件里务必设"root": true防止继承上级配置，且"extends"指向html-validate:recommended以启用基础语义规则。
浏览器Elements面板才是嵌套问题的终审法官
VSCode和CLI工具再准，也替代不了浏览器真实解析结果。打开DevTools → Elements，重点看三处：
- 灰色文字节点：如
<tbody>被自动插入，说明原始HTML缺了它，但没报错——这是容错，不是合法 - 红色虚线下划线：如
<p><div>xxx</div></p>中<div>会被标红，明确提示“Element div not allowed as child of element p” - 右键某元素 →
Break on → Attribute modifications：当JS动态拼接HTML字符串出错（如innerHTML = "<div class='" + cls + "'>"少了个>），这里会立刻中断
真正容易被忽略的，是那些没报错却悄悄改写DOM的场景：比如<div><p><span>hello</p></div>，浏览器会把</p>提前闭合，导致<span>实际被包进<p>，后续CSS选择器div span就失效了——这种结构偏移，只有在Elements里展开层级才能肉眼确认。
