VS Code中HTML标签回车后缩进不符合预期问题求助

针对你遇到的两个缩进场景问题，可以通过调整VS Code配置或格式化器设置解决：

一、调整VS Code内置HTML配置 #

将你的settings.json更新为以下内容（关键新增/调整项已标注）：

{
  "html.autoClosingTags": true,
  "html.format.indentInnerHtml": true,
  "html.format.preserveNewLines": true,
  "html.format.wrapAttributes": "force-expand-multiline",
  "html.format.wrapAttributesIndentSize": 2, // 关键：控制多行属性标签内的缩进大小，与tabSize一致
  "editor.autoIndent": "full",
  "editor.detectIndentation": true,
  "editor.tabSize": 2, // 匹配你的现有缩进规格
  "editor.insertSpaces": true, // 确保使用空格缩进，避免混合制表符
  "html.format.indentHandlebars": true
}

关键设置说明 #

• html.format.wrapAttributesIndentSize：专门控制标签属性多行展开时，标签内部内容的缩进级别，设置为和tabSize一致（比如你用的2空格），可解决场景二中的内部缩进缺失问题。
• editor.insertSpaces + editor.tabSize：确保缩进规则统一，避免因混合空格和制表符导致的缩进异常。

二、检查第三方格式化器干扰 #

若安装了Prettier等第三方格式化工具，它可能覆盖VS Code内置的HTML缩进规则：

1. 打开命令面板（Ctrl+Shift+P），执行Format Document With...，选择HTML Language Features作为默认HTML格式化器。
2. 若需保留Prettier，在项目的.prettierrc中添加对应配置：

{
  "tabWidth": 2,
  "useTabs": false,
  "html.indentInnerHtml": true,
  "bracketSameLine": false
}

三、验证生效 #

更新配置后重启VS Code，分别测试两个场景：

• 场景一：光标在闭合标签前回车，会自动对齐到父标签的缩进级别，符合预期。
• 场景二：光标在多行属性的标签内回车，会自动缩进一个tabSize的距离，得到标签内缩进效果。

内容的提问来源于stack exchange，提问作者Andrew Haskell