html.format.indentinnerhtml必须设为true，否则和与顶格对齐，无法体现子容器关系；设为true后按editor.tabsize缩进，结构清晰。
VSCode 能自动对齐 HTML 标签层级，但默认配置下常出现缩进错位、 和 不缩进、嵌套过深时换行混乱等问题——关键不在“能不能”，而在“配不配得对”。
为什么 html.format.indentInnerHtml 必须设为 true
这个配置决定 内部的 和 是否比根标签多缩进一层。设为 false（默认值）时，它们和 顶格对齐，视觉上无法体现“子容器”关系：
设为 true 后，结构立即清晰：
- 它只影响
直接子元素，不影响更深层嵌套（如<div> 里的 <code><p></p>） - 与
editor.tabSize协同工作：若后者是2，则缩进就是两个空格 - 若项目已用 Prettier，则此配置会被覆盖，需在
.prettierrc中统一控制
editor.detectIndentation 关掉才真正可控
VSCode 默认开启 editor.detectIndentation，会根据文件首行缩进自动推断用空格还是 Tab、缩进宽度多少。这在混入第三方代码或复制粘贴后极易“误判”，导致后续格式化前后不一致。
应明确禁用并锁定规则：
{
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false
}
-
"editor.insertSpaces": true强制用空格而非 Tab，避免不同编辑器渲染差异 - 禁用检测后，新文件、粘贴内容、自动格式化全部遵循
tabSize，不会“突然变宽” - 已有文件若缩进混乱，先全选 →
Shift + Tab归零，再Shift + Alt + F重格式
嵌套过深时，html.format.wrapLineLength 控制换行逻辑
当一行内有多个嵌套标签（比如 <div><section><article><p> 连写），VSCode 默认不换行，导致单行长达百字符，可读性骤降。</p>
<p>设置 <code>html.format.wrapLineLength 可强制折行（单位：字符数）：
"html.format.wrapLineLength": 80
- 值为
0表示禁用自动换行；建议设为80或100，兼顾屏幕宽度与语义完整性 - 它只作用于开始标签，不拆分属性（即不会把
class="a b c"拆到下一行） - 注意：Prettier 的
printWidth与此功能重叠，二者同时存在时以 Prettier 为准
手动微调缩进时，别用空格键硬敲
遇到某几行需要临时调整（比如注释块对齐、模板字符串内嵌 HTML），最稳妥的方式是选中目标行，用快捷键操作：
- 增加缩进：
Tab（不是空格键） - 减少缩进：
Shift + Tab（不是退格键） - 整块缩进对齐后，再执行
Shift + Alt + F全局格式化，避免局部改动被冲掉
空格键或退格键直接输入/删除，会破坏 VSCode 对缩进层级的识别，下次格式化可能反向错乱。
