vscode原生“trim trailing whitespace”仅删行尾空格，不处理class=""等空属性或空标签；需用正则批量替换：class\s=\s"'、style\s=\s"'删空属性，]*?/?>匹配自闭合空标签，]*?>[\s\s]*?]*?>匹配成对空容器，并避开script等语义敏感区域。
VSCode 里用正则批量删空属性和空标签
编辑器自带的“Trim Trailing Whitespace”只清行尾空格，对 class=""、style=""、<div></div> 这类冗余内容完全无效。必须打开全局搜索替换（Ctrl+Shift+F），点亮右上角 .* 按钮启用正则模式：
- 删空属性：
class\s*=\s*["']["']或style\s*=\s*["']["']，替换成空 - 删空标签：
]*?\/?>配合]*?>[\s\S]*?]*?>分两步处理，前者抓自闭合空标签（如<img src="">），后者抓成对空容器（如<div></div>） - 跳过
<pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></style>、<textarea></textarea>区域——这些标签里的换行是语义必需的，正则无差别扫描会破坏代码逻辑
清理 HTML 注释不能只靠单行正则
老项目里常有跨多行的注释块，比如：
<!-- TODO: 重构 header @author zhang -->
用 <!--.*?--> 只能匹配单行注释，遇到换行就断。必须用 <!--[\s\S]*?--> ——其中 [\s\S] 表示“任意字符（含换行）”，*? 是非贪婪匹配，避免吞掉两个注释之间的正常 HTML。
命令行下可用：perl -0777 -i -pe 's/<!--.*?-->//gs' index.html，但注意：这个正则仍会误杀 <style></style> 内的 /* */ 注释，这类内容得交给 PostCSS 或专门的 CSS 压缩工具处理。
DOM 层面清理文本节点空白必须用 childNodes
想清掉 #left 容器里所有子文本节点的首尾换行和中间多个空格？别用 children，它只返回元素节点，会漏掉 \n\t 这类纯文本节点。正确做法是遍历 childNodes，并加语义判断：
- 只处理
nodeType === Node.TEXT_NODE（即3） - 先用
/\S/.test(text)过滤——跳过纯空白节点（比如仅含制表符或换行的缩进） - 清洗时分两步：
text.trim().replace(/\s+/g, ' ')，\s比
jQuery 的 .text() 会把整个子树文本合并成字符串再返回，无法控制清洗粒度；.html() 返回的是序列化后的字符串，改了也刷不到 DOM 上。
inline-block 和行内元素间的空隙不是“空格”而是渲染行为
写成这样：<span>A</span>\n<span>B</span>，浏览器渲染出的间隙不是源码里那个换行符本身，而是行内格式化上下文（IFC）把换行当空格处理的结果。所以删源码换行只是治标。
真正可控的解法是 CSS 层面干预：
- 父容器设
font-size: 0，子元素再设回正常字号——简单直接，但要注意继承影响 - 改显示模式：
display: flex或display: grid，彻底绕开 IFC 的空白处理逻辑 - 用 HTML 注释“缝合”：
<span>A</span><!-- --><span>B</span>，比删换行更易读，也不影响可维护性
最常被忽略的一点：这些空隙在移动端可能因字体渲染差异放大，调试时别只盯着源码看，得开 DevTools 的 Layout 面板确认是 margin/padding 还是 IFC 空隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
