vs code html格式化需满足三条件：文件后缀为.html或.htm、语言模式设为html、settings.json中启用"html.format.enable": true；缩进由editor.tabsize控制，须设"editor.insertspaces": true以统一空格而非tab。
直接用编辑器格式化，别手动调缩进——手动既慢又容易错，尤其嵌套深时一不留神就漏闭合标签或缩进错层。
VS Code 按 Shift + Alt + F 没反应？先检查这三件事
快捷键失效不是编辑器坏了，大概率是底层配置没对上：
- 文件后缀必须是
.html或.htm，否则 VS Code 不会启用 HTML 格式化服务 - 右键编辑区空白处，看菜单里有没有“格式化文档”；没有的话说明语言模式没识别成 HTML（按
Ctrl + Shift + P输入Change Language Mode，选HTML） - 打开
settings.json，确认含"html.format.enable": true，缺了这句，格式化功能就是关着的
editor.tabSize 和 html.format.indentInnerHtml 到底谁管缩进？
这两个常被混用，但作用完全不同：
-
editor.tabSize控制你按 Tab 键时插入几个空格——它只影响**手动输入行为**，比如你敲 Tab 想缩进一级，它决定这一级是 2 还是 4 个空格 -
html.format.indentInnerHtml决定格式化时是否对、这类根级标签的子元素缩进，默认false，结果就是和贴着左边——设成true才符合常规嵌套逻辑 - 真正控制格式化后缩进宽度的，是
editor.tabSize，不是html.format.*下的任何字段
为什么必须用空格，不能用 Tab？
Tab 在不同编辑器里默认宽度不一致：VS Code 可能设为 4，WebStorm 默认 4，有人本地设成 8 后提交，同一段 <div><p>文字</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div> 在你眼里就塌了一层。空格是 ASCII 32 字面量，4 就是 4 个空格，渲染零偏差。
- Git diff 显示大量“仅空格变化”，实际是 Tab 和空格混用
- 别人格式化后你的
<section></section>突然比<header></header>多缩进一级 - 复制粘贴到 Slack 或文档时，Tab 被转成 2–8 个不等空格，结构彻底消失
VS Code 中必须加这三条配置："editor.insertSpaces": true（按 Tab 也插空格）、"editor.tabSize": 4（一级缩进 = 4 个空格）、"html.format.indentInnerHtml": true（让 <style></style> 和 <script></script> 内部也对齐外层标签）。
<pre class="brush:php;toolbar:false;"></pre> 里的 HTML 缩进怎么保得住？
这是个典型陷阱：你往 <pre class="brush:php;toolbar:false;"></pre> 里写带缩进的 HTML 片段，结果渲染出来全是扁平的——因为 <pre class="brush:php;toolbar:false;"></pre> 只保留换行和空格，但浏览器默认样式会让字体变小、边距压垮、横向溢出。
- 必须加 CSS：
white-space: pre-wrap（保留空格 + 自动换行）或white-space: pre-line（合并连续空格但保留换行） - 外层包一层
<div class="code-block">，再设 <code>overflow-x: auto，不然宽代码直接撑破容器 - 别指望格式化工具自动处理
<pre class="brush:php;toolbar:false;"></pre>里的内容——Prettier 默认跳过它，得靠 CSS 和手动转义
缩进不是给浏览器看的，是给人读的；但一旦放任不管，协作中第一个被骂的永远是那个没配 editor.insertSpaces 的人。
