Visual Studio Code中HTML Emmet按Tab展开后未自动格式化如何解决

默认Emmet会将label、input、button这类行内/行内块级元素判定为不需要换行的元素，多个连续行内元素展开时会被压缩到同一行，按照以下步骤配置即可修复：

• 打开VS Code设置面板：快捷键为Ctrl+,（Windows/Linux系统）、Cmd+,（Mac系统），也可以点击左下角齿轮图标选择「设置」选项。
• 点击设置面板右上角的「打开设置(JSON)」按钮，进入JSON格式的自定义配置编辑页面。
• 在配置文件中添加如下规则，保存后重启VS Code即可生效：

{
  // 开启Tab触发Emmet缩写展开，如已开启可忽略
  "emmet.triggerExpansionOnTab": true,
  // Emmet语法规则配置
  "emmet.syntaxProfiles": {
    "html": {
      // 强制所有标签单独占一行
      "tag_nl": true,
      // 只要出现行内元素就强制换行，避免多个行内元素挤在同一行
      "inline_break": 0,
      // 自定义缩进字符，按你的编码习惯调整为2空格/4空格即可
      "indent": "  "
    }
  },
  // 可选配置：开启保存自动格式化，适配Prettier等第三方格式化插件的规则
  "editor.formatOnSave": true
}

如果在Vue、React等框架的单文件中使用Emmet也遇到相同问题，只需在emmet.syntaxProfiles中补充对应语法的配置即可，比如新增"vue-html": { "tag_nl": true, "inline_break": 0 }适配Vue模板、"javascriptreact": { "tag_nl": true, "inline_break": 0 }适配JSX语法。

内容的提问来源于stack exchange，提问作者Zeyad Shaban