使用HTML编辑器设置网页默认缩进的步骤-html教程-PHP中文网

vs code html缩进不生效的三个硬性条件是：文件后缀必须为.html或.htm、语言模式需设为html、"html.format.enable": true必须启用；editor.tabsize控制缩进宽度，html.format.indentinnerhtml决定顶层标签子元素是否缩进。

使用html编辑器设置网页默认缩进的步骤

VS Code 里 HTML 文件缩进不生效的三个硬性条件

不是编辑器坏了，是这三个环节没对齐：.html 后缀、语言模式设为 HTML、"html.format.enable": true 必须启用。缺一不可。

常见错误现象：按 Shift + Alt + F 没反应；右键菜单里没有“格式化文档”；保存后缩进原地不动。

检查文件名是否以 .html 或 .htm 结尾（.txt 或无后缀会被忽略）
右下角状态栏点语言模式，确认显示 HTML；若显示 Plain Text，按 Ctrl + Shift + P 输入 Change Language Mode，选 HTML
打开 settings.json，搜索 html.format.enable，确保值为 true（不是 false，也不能缺失）

editor.tabSize 和 html.format.indentInnerHtml 到底谁管什么

这两个配置常被混用，但职责完全分离：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

editor.tabSize 控制「按 Tab 键插入几个空格」，也决定格式化后每级缩进的宽度（Prettier 会读它）
html.format.indentInnerHtml 只控制是否给、这类顶层标签的子元素加缩进，默认 false，所以和默认顶格——设成 true 才符合嵌套直觉
真正影响“缩进几格”的只有 editor.tabSize；html.format.* 下没有任何字段能改这个值

Prettier 的 htmlWhitespaceSensitivity 该选哪个

这个选项直接影响格式化后换行和空格是否被保留，尤其在含内联文本或密集标签时：

"css"（推荐）：把空白当 CSS 中普通空格处理，保留你有意留的空行（比如 <p></p> 和 <div> 之间），结构清晰易读 <li> <code>"strict"：严格按 HTML 规范删空白，容易把手动加的换行全吃掉，导致代码“挤在一起”，<pre class="brush:php;toolbar:false;"></pre> 周围尤其容易错乱
"ignore"：Prettier 完全跳过 HTML 空白处理，缩进可能错位，且与 ESLint 的 indent 规则冲突

`<pre class="brush:php;toolbar:false;"></pre>` 里的 HTML 缩进为什么“看不见”

这不是缩进失效，是浏览器默认样式压制了你的意图：<pre class="brush:php;toolbar:false;"></pre> 保留原始空格和换行，但默认 white-space: 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> 里第一行开头有空格或制表符，会和 text-indent 叠加造成“双缩进”假象

html.format.indentInnerHtml

<pre class="brush:php;toolbar:false;"></pre>