vs code html格式化失效主因是三条件未满足：文件后缀非.html/.htm、语言模式未设为html、settings.json缺"html.format.enable":true；editor.tabsize控制缩进宽度，html.format.indentinnerhtml控制根标签子元素缩进，editor.insertspaces必须为true以确保空格缩进一致。
HTML格式化不是“让代码看起来整齐”这么简单——它直接影响标签闭合是否出错、语义是否被破坏、团队协作时 diff 是否爆炸，甚至影响 pre 里贴的代码能否原样渲染。真正可靠的格式化，靠的是配置驱动，不是手动敲空格。
VS Code 格式化不生效？先检查这三件事
按 Shift + Alt + F 没反应，90% 是以下任一条件没满足：
- 文件后缀不是
.html或.htm（比如写成.txt或没后缀） - 右键编辑区 → “Change Language Mode” 没选成
HTML（状态栏右下角显示语言模式，不是Plain Text或Auto） -
settings.json里缺了"html.format.enable": true（光开全局格式化没用，HTML 必须单独启用）
这三个条件少一个，格式化就静默失效。别猜，直接查。
editor.tabSize 和 html.format.indentInnerHtml 到底谁管缩进？
它们分工明确，混用就会缩进错层：
-
editor.tabSize：决定“按 Tab 键插几个空格”，也**决定格式化后的缩进宽度**（比如设为4，所有层级都用 4 空格） -
html.format.indentInnerHtml：只控制、这类根级标签的子元素是否缩进（默认false，所以和会顶到最左；设为true才符合直觉）
真正要改的只有 editor.tabSize 和 html.format.indentInnerHtml，其他 html.format.* 字段基本不用碰。
<pre class="brush:php;toolbar:false;"></pre> 里的 HTML 缩进为什么总塌掉？
你往 <pre class="brush:php;toolbar:false;"></pre> 里写带缩进的 HTML 片段，浏览器渲染出来却是扁平的——这不是格式化失败，是 CSS 默认样式压制了空格语义：
-
<pre class="brush:php;toolbar:false;"></pre>只保留换行和空格，但默认字体小、margin大、不换行，导致结构“看不见” - 必须加 CSS：
white-space: pre-wrap（保留空格 + 自动换行），或white-space: pre-line（合并连续空格但保留换行） - 别用
<br>去模拟空行，那会污染语义，且在响应式下极易错位
这个坑特别隐蔽：你本地看着好好的，一贴进文档或 Slack，Tab 被转成不等量空格，整个嵌套就乱了。
最易被忽略的其实是 editor.insertSpaces —— 它必须设为 true，否则按 Tab 插入的是制表符（Tab），而不同编辑器对 Tab 的渲染宽度不一致，Git 提交后别人打开就可能发现缩进全偏了。空格才是唯一可预测的缩进单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
