VSCode无原生“一键清理空HTML标签”功能，需用正则替换配合人工预判：匹配成对空标签（如<div></div>）和自闭合标签（如<br/>），但无法语义识别CSS/JS依赖，易误删关键占位符，必须格式化后手动验证。
VSCode里没有“一键清理空HTML标签”的原生功能
VSCode本身不提供识别并删除<div></div>、<span></span>这类空元素的命令或设置。所谓“一键”，实际是靠正则替换 + 人工预判组合完成，不是真正语义化清理——它不会判断<img>是否被CSS撑开、<button></button>是否靠伪元素渲染内容。
用正则批量匹配常见空标签（含自闭合与成对）
打开目标文件 → Ctrl+H → 勾选 .*（启用正则）→ 在查找框填：
^\s*<([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>\s*<\/\1\s*>\s*$\n?|^\s*<([a-zA-Z][a-zA-Z0-9]*)\b[^>]*\/>\s*$\n?
替换框留空 → 点击 Replace All。
这个正则覆盖两类情况：
立即学习“前端免费学习笔记（深入）”；
-
<div></div>、<span class="x"></span>等成对且中间无文本/子节点的标签（注意：不处理换行或空格嵌套，如<div>\n </div>需先格式化） -
<br/>、<hr>、<input type="text"/>等自闭合标签（但会误删带意义的<img src="x"/>，慎用） - 不匹配
<div> </div>（含空格）、<div><span></span></div>（含子标签）或<div title="x"></div>（含属性但无内容）
为什么不能依赖插件自动清理？
目前主流插件（如 Auto Close Tag、Auto Rename Tag、HTMLHint）都不提供“删除空标签”能力。原因很实在：
- 空标签是否冗余，取决于上下文：CSS可能用
::before注入内容，JS可能动态填充，<canvas></canvas>天生无内容但绝不能删 - 插件无法执行 DOM 解析，纯文本正则做不到语义判断，强行封装只会误导用户删掉关键占位符
- 已有插件如
HTML Boilerplate或Prettier只格式化、不删减；ESLint-plugin-html仅检查，不修改
安全清理的实操建议
真要删空标签，必须分三步走，缺一不可：
- 先用
Shift+Alt+F格式化 HTML，让所有标签对齐、换行统一，避免正则漏掉换行包裹的空标签 - 用上面正则跑一遍，然后手动
Ctrl+Shift+F全局搜<[a-z]+></[a-z]+>，逐个确认是否可删（重点看父容器、CSS类名、JS绑定） - 删完立刻在浏览器里打开，用开发者工具 Elements 面板检查结构是否断裂，特别是
<nav>、<footer>内的空容器常是布局锚点 - 如果项目用 Vue/React，绝对不要对
.vue或.jsx文件跑该正则——模板字符串和 JSX 表达式会让正则彻底失效
最易被忽略的是：空标签常被用作 CSS Grid / Flex 的占位项，或 JS 动态插入内容的挂载点。删之前，先查 class 名是否出现在 CSS 文件里，或者搜 document.querySelector 是否引用了它。
