VSCode未闭合标签无红波浪线的根本原因是内置HTML语言服务的校验开关默认关闭，需手动启用html.validate.scripts、html.validate.styles和html.suggest.html5三项配置。
VSCode里未闭合标签为什么没红波浪线
根本原因不是插件没装，而是 VSCode 内置 HTML 语言服务的校验开关默认关着。哪怕你写了 <div><p>hello 这种明显漏掉两个闭合标签的代码，也不会标红——它压根没启动结构验证。
必须手动打开三项配置：
-
html.validate.scripts设为true（否则内联<script>会干扰解析） -
html.validate.styles设为true（同理，<style>块也参与上下文推断） -
html.suggest.html5必须为true（降级到旧版 HTML 解析器后，嵌套规则识别能力大幅下降）
快捷操作：按 Ctrl+Shift+P 输入 Error Squiggles，选 Enable Error Squiggles；如果命令不存在，就去设置里搜这三项并确认启用。
注意：这些只对语言模式是 HTML 的文件生效。右下角状态栏显示 Plain Text 或 PHP 时，点击切换为 HTML。
立即学习“前端免费学习笔记（深入）”；
Auto Rename Tag 和 Auto Close Tag 别同时开
两者功能重叠但机制不同：Auto Rename Tag 监听开始标签修改，自动同步结束标签；Auto Close Tag 在输入 <div 后回车或敲 > 时补全 </div>。如果同时启用，尤其在 Vue 或 JSX 文件中，会出现标签乱跳、补全错位甚至光标失控。
真实项目中的推荐组合：
- 纯
.html文件：开Auto Close Tag+ 关Auto Rename Tag -
.vue文件：优先用Volar自带的volar.autoCloseTag，关掉Auto Close Tag插件 -
.jsx或.tsx：只开Auto Rename Tag，因为 React 不需要自动闭合（JSX 语法本身不依赖结束标签）
冲突信号：改完 <section> 立刻变成 <section></section>，但光标卡在中间、无法继续输入内容——这就是双插件打架。
缩进颜色和结束标签标注才是真眼药水
靠肉眼数 <div> 和 </div> 个数？太慢还容易漏。真正快的是视觉锚点：
- 装
indent-rainbow：每层缩进用不同颜色标记，一眼看出哪层突然“塌陷”——比如第 4 层缩进颜色本该是蓝色，却变成了绿色，说明上一层提前闭合了 - 装
HTML End Tag Labels：在每个</div>后面自动加上<!-- /div -->注释，不用来回拖动滚动条找对应起始标签
这两个插件不干涉语法校验，纯粹提升人眼扫描效率。尤其适合处理动态生成的菜单、嵌套 8 层以上的表单或从 CMS 导出的混乱 HTML 片段。
注意：indent-rainbow 的颜色层级和编辑器缩进宽度强绑定，若你设了 editor.tabSize: 4，但文件混用了空格和 Tab，颜色就会错位——统一用空格缩进才能稳定生效。
浏览器 Elements 面板比编辑器更诚实
VSCode 标红了，不代表 DOM 就安全；VSCode 没标红，也不代表结构没问题。浏览器才是最终裁判，因为它按 HTML 规范强行修复非法嵌套。
关键动作：
- 打开 Chrome DevTools，切到
Elements面板，观察节点灰度：灰色文字的节点（如<tbody>）是浏览器自动补的，说明你漏写了 - 看到红色虚线下划线（如
<p><div>xxx</div></p>中的<div>），就是明确违反内容模型，JS 可能根本找不到这个<div> - 右键某个元素 →
Edit as HTML，手动加一个</div>，如果整个页面布局“跳变”，证明原始嵌套早已被浏览器重写过
最隐蔽的坑是模板引擎场景：EJS、Django 或 Vue 的 v-if 分支里，不同路径的开闭标签数量不一致。VSCode 静态分析不了运行时逻辑，这类错误只能靠人工核对每条分支，或加 document.querySelectorAll('*').forEach(...) 脚本揪出孤立节点。
