HTML格式化工具会“帮倒忙”是因为它们不报错却暴露原有结构错误，如未闭合div导致后续数百行被错误缩进；<pre>、<table>及v-html等动态内容区域最易踩坑，需用// prettier-ignore或"htmlWhitespaceSensitivity": "strict"精准控制。
为什么 HTML 格式化工具会“帮倒忙”？
格式化工具（如 Prettier、HTMLTidy）本身不报错，但它们会暴露或放大你原本就存在的结构错误。比如 div 没闭合，Prettier 不会报错，但它可能把后续几百行都缩进到那个未闭合的 div 下——你在 VS Code 里看到的“整齐缩进”，其实是浏览器容错后 DOM 被重写的视觉假象。
哪些标签在格式化时最容易踩坑？
不是所有标签都适合被自动格式化。以下三类要特别小心：
-
<pre>和<textarea>：内部换行、空格有语义，Prettier 默认会删空格、合并换行，导致代码块变形、用户输入格式丢失 -
<table>及其子标签（<thead>/<tbody>/<tr>）：Prettier 的嵌套缩进逻辑常把<tr>错误缩进到<thead>外，触发浏览器自动补<tbody>，最终 Elements 面板显示灰色斜体 - 动态拼接内容区域（如 Vue 的
v-html、React 的dangerouslySetInnerHTML）：格式化工具无法解析运行时字符串，但会强行美化模板里的占位 HTML，反而掩盖真实结构问题
怎么让 Prettier 别乱动特定标签？
靠全局关掉格式化是下策，精准控制才靠谱：
- 用
// prettier-ignore注释包裹整段：放在<pre>前一行即可，Prettier 会跳过该块 - 对
<table>类结构，加配置"htmlWhitespaceSensitivity": "strict"，它会让 Prettier 更保守地处理换行，减少跨行缩进 - VS Code 中右键 → “Format Document With…” → 选 “Configure Default Formatter” → 设为 “None” 临时禁用，比全局关插件更安全
格式化后页面变样，第一反应不该是调配置
真正该先查的是：Elements 面板里有没有灰色斜体标签？document.body.innerHTML 和源码是否一致？W3C Validator 报的“第 42 行未闭合”，往往意味着问题出在第 12 行那个漏掉的 </div> —— 格式化只是把隐藏多年的嵌套崩塌，当场显形而已。
立即学习“前端免费学习笔记（深入）”；
