根本原因是VSCode内置格式化器默认html.format.indentInnerHtml为true，而Prettier默认忽略HTML内部缩进，仅按换行规则排布；两者共存时Prettier会覆盖VSCode缩进行为，导致嵌套标签被压成单行。
为什么Prettier和VSCode内置格式化器缩进结果不一致
根本原因是两者处理 html.format.indentInnerHtml 的默认值不同：VSCode内置格式化器默认为 true，而Prettier默认忽略HTML内部缩进逻辑，只按整体换行规则排布。当你同时启用两者且未显式配置，Prettier会覆盖VSCode的缩进行为，导致 <div><p>文本</p></div> 被格式化成单行，而非嵌套缩进。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若坚持用Prettier统一风格，必须在
.prettierrc中显式启用HTML缩进："htmlWhitespaceSensitivity": "css"（影响标签间空格处理），并配合"tabWidth": 2或4 - 若偏好VSCode原生缩进逻辑，禁用Prettier对HTML的接管：在VSCode设置中添加
"prettier.disableLanguages": ["html"] - 检查当前激活的格式化工具——状态栏右下角点击语言模式旁的格式化器图标，确认是
Prettier还是Default Formatter
如何让自闭合标签（如<img>、<input>）正确缩进
VSCode默认对自闭合标签不作特殊缩进处理，它只依赖父级标签层级决定缩进量。但常见错误是手动输入时漏掉换行或空格，导致 <div><img src="x"></div> 无缩进，破坏视觉结构。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 启用
html.format.indentInnerHtml（设为true），确保所有子节点（含自闭合标签）跟随父级缩进 - 关闭
html.format.preserveNewLines（设为false），避免因原始换行干扰自动缩进判断 - 不要依赖Tab键手动缩进自闭合标签——它可能插入制表符而非空格，与
editor.insertSpaces: true冲突 - 验证效果：输入
<div><img></div>后按Shift + Alt + F，应得到：<div> <img> </div>
editor.detectIndentation 开启后反而缩进错乱？
这个开关本意是“根据文件已有缩进自动推断规则”，但实际常成为缩进混乱的源头——尤其当文件混有空格和Tab、或从其他编辑器粘贴代码时，VSCode可能误判为“4空格”，却在后续编辑中插入Tab字符，造成混合缩进。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一律设为
false，强制使用你定义的editor.tabSize和editor.insertSpaces - 对已有混乱文件，先全选 →
Ctrl + Shift + P→ 执行Convert Indentation to Spaces，再格式化 - 团队项目务必在
.vscode/settings.json中锁定该配置，避免成员本地设置覆盖 - 注意：此设置对单个文件无效，需全局或工作区生效；若仅想对HTML生效，须配合
"[html]": { "editor.detectIndentation": false }
插件冲突导致格式化快捷键失效
典型现象是按下 Shift + Alt + F 没反应，或弹出“选择格式化程序”提示但无选项。这通常是因为多个插件（如Auto Close Tag、Beautify、JS-CSS-HTML Formatter）同时注册了HTML格式化能力，VSCode无法确定优先级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开命令面板
Ctrl + Shift + P，输入Format Document With...，查看当前可用格式化器列表 - 禁用非必要的格式化插件，只保留Prettier或VSCode内置一个
- 在设置中指定默认格式化器：
"html.format.enable": true（启用内置）或"editor.defaultFormatter": "esbenp.prettier-vscode" - 检查插件权限：某些插件需在设置中手动开启HTML支持，例如Prettier需确认
prettier.htmlEnable为true
onType 格式化（比如输入 > 自动补全时触发），就可能覆盖你设定的缩进规则。调试时优先看状态栏格式化器名称，再查对应插件文档的HTML支持说明。 
