shift+alt+f 无反应是因为格式化链路中断：需同时满足文件后缀为.html/.htm、语言模式设为html、settings.json中启用"html.format.enable": true。
VS Code 里 Shift+Alt+F 没反应，缩进根本不动？
不是快捷键坏了，是格式化链路断在了最前面。三个条件缺一不可：文件后缀必须是 .html 或 .htm、语言模式必须是 HTML（右键编辑区 → “更改语言模式”确认）、"html.format.enable": true 在 settings.json 中显式启用。
常见错误现象：粘贴一段 HTML 到 index.txt 里按快捷键，毫无反应；或者文件明明是 page.html，但左下角显示“Plain Text”，那说明语言模式没识别成功。
实操建议：
- 按
Ctrl + Shift + P输入Change Language Mode，手动选HTML - 检查
settings.json是否被工作区配置覆盖——全局设置开了，工作区关了，照样不生效 - 禁用
"editor.detectIndentation": false，防止 VS Code 自作主张从文件里读旧缩进风格，导致空格/Tab 混用
editor.tabSize 和 html.format.indentInnerHtml 到底谁在管缩进？
editor.tabSize 管的是“你按 Tab 键时插几个空格”，也决定格式化后每一级缩进用几个空格；html.format.indentInnerHtml 只控制一件事： 和 这类顶层标签的子元素要不要缩进。
默认值是 false，结果就是整个文档顶到左边， 和 不缩进，只有它们内部的子元素才逐级缩进——这不符合多数人的阅读直觉。
实操建议：
- 设
"editor.tabSize": 2或4（团队统一即可，2 更适合深嵌套） - 必须加
"html.format.indentInnerHtml": true，否则下第一层就塌陷 -
"editor.insertSpaces": true必须开启，杜绝 Tab 字符混入
Prettier 的 htmlWhitespaceSensitivity 怎么选？
这个配置不控制缩进宽度，而是决定 Prettier 如何对待标签之间的空白和换行。选错会导致 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/178995432594388.jpg" alt="Pptx To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="overflowclass">Pptx To Html</a>
<p class="overflowclass">使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 和 <div> 之间该有的空行消失，或把内联文本里的换行全吃掉。
<p>常见错误现象：<code><pre class="brush:php;toolbar:false;"></pre> 里的代码缩进被压平、段落间空行没了、<button>点击</button><span>辅助文字</span> 被格式成紧贴着的一行，影响可读性。
实操建议：
- 日常项目用
"htmlWhitespaceSensitivity": "css"（Prettier 默认），它把空白当 CSS 处理，保留有意义的换行 - 避免
"strict"：它会删掉大量人为添加的空行，尤其在语义化结构中容易让逻辑断裂 - 绝对别用
"ignore"：Prettier 直接跳过 HTML 空白处理，缩进可能错位，且和 ESLint 冲突
里的 HTML 缩进为什么一渲染就扁平？
<pre class="brush:php;toolbar:false;"></pre> 确实保留空格和换行，但浏览器默认样式会让字体变小、上下 margin 压垮、横向溢出——你看到的“没缩进”，其实是样式把缩进撑开了又裁掉了。
这不是格式化工具的问题，是渲染层的样式缺失。
实操建议：
- 给
<pre class="brush:php;toolbar:false;"></pre>加 CSS：white-space: pre-wrap（保留空格+自动换行）或white-space: pre-line（合并连续空格但保留换行） - 外层包一层
<div class="code-block">，并设 <code>overflow-x: auto防止宽代码撑破容器 - 如果里面是 HTML 片段，记得对
<code>>做 HTML 实体转义，否则会被浏览器解析为真实标签
真正容易被忽略的，是缩进规则和语义结构的配合：比如 <ul></ul> 下直接写 <p></p>，缩进再整齐也是结构错误；格式化工具只帮你更快发现它，而不是替你修复它。
