必须用4个空格缩进并禁用Tab，因Tab在不同编辑器中宽度不一致（如2/4/8列），导致协作时层级错位；空格是ASCII 32字面量，渲染零偏差，需通过VS Code的"editor.insertSpaces":true、"editor.tabSize":4、"html.format.indentInnerHtml":true三项配置及Prettier的"htmlWhitespaceSensitivity":"css"固化规则。
HTML代码缩进不是“要不要做”的问题，而是“怎么统一做、谁来保证它不退化”的问题。核心结论：全项目强制用 4 个空格缩进，禁用 Tab，且必须通过编辑器配置或工具链固化，否则协作中必然出现层级错位。
为什么必须用空格而不是 Tab？
Tab 在不同编辑器里默认宽度不一致——VS Code 可能设为 2，WebStorm 默认 4，而某人本地设成 8 后提交，同一段嵌套 <div> 在你眼里就塌了一层。空格是字面量，<code>4 就是 4 个 ASCII 32，渲染零偏差。
常见错误现象：
- Git diff 显示大量“仅空格变化”，实际是
Tab和空格混用 - 多人协作时，别人格式化后你的
<section></section>突然比<header></header>多缩进一级 - 复制粘贴到 Slack 或文档时，Tab 被转成 2–8 个不等空格，结构彻底消失
VS Code 中必须改的三项关键配置
仅靠快捷键 Shift+Alt+F 不够，它依赖底层设置是否生效。打开 settings.json，确认含以下三条：
立即学习“前端免费学习笔记（深入）”；
-
"editor.insertSpaces": true—— 强制插入空格，哪怕你按Tab键 -
"editor.tabSize": 4—— 定义“一级缩进 = 4 个空格”，不是 2 也不是自动检测 -
"html.format.indentInnerHtml": true—— 让<style></style>和<script></script>内部也对齐外层标签，而非从内容起始缩进
漏掉任意一项，<div><p>文字</p></div> 格式化后可能仍不换行，或 <script></script> 里的 JS 代码被错误缩进。
Prettier 配置里最容易被忽略的 HTML 选项
很多人只配了 "tabWidth": 4，但 HTML 特有的空白敏感行为会破坏结构。必须加：
-
"htmlWhitespaceSensitivity": "css"—— 这个值让 Prettier 把文本节点间的空格当作 CSS 中的white-space: normal处理，避免把有意保留的换行/缩进吃掉 -
"endOfLine": "lf"—— 统一行尾符，Windows 用户尤其要注意，否则git status会反复提示“CRLF will be replaced by LF” - 别用
"semi": false或"singleQuote": true这类 JS 选项去管 HTML，它们对 HTML 无效，还可能干扰插件解析
示例错误配置：{"tabWidth": 4} → 格式化后 <ul>
<li>项1</li>
<li>项2</li>
</ul> 仍挤在一行；正确配置后自动展开为多行并缩进子项。
哪些地方缩进规则会“失效”？
不是所有 HTML 场景都适用标准缩进，硬套反而降低可读性：
-
<pre class="brush:php;toolbar:false;"></pre>和<textarea></textarea>内容：内部空格/换行是语义的一部分，Prettier 和 VS Code 默认跳过，手动缩进会破坏原始排版 - 内联 SVG 的
path属性：长字符串堆在一行更易 diff，强行折行+缩进反而增加合并冲突概率 - 模板字符串中的 HTML（如 Lit、React JSX）：需依赖对应语言插件（如
esbuild-plugin-prettier），原生 Prettier 不识别 JS 里拼接的 HTML 字符串
真正难的不是“怎么缩进”，而是让缩进规则在 .html、.svelte、.astro、甚至 Markdown 里的 HTML 片段中保持一致——这需要工具链对齐，而非单点配置。
