如何在 VS Code 中通过 Emmet 自动为 HTML 同级元素插入空行

vs code 默认不支持直接设置“在同级 html 元素间自动插入空行”，但可通过 emmet 的 `{}` 空文本节点技巧实现该效果，无需插件或复杂配置。

在 VS Code 中编写 HTML 时，若希望

和 这类同级块级元素之间自动生成空行（提升可读性与团队代码规范），不能依赖格式化设置（如 html.format.wrapLineLength 或 Prettier 的 htmlWhitespaceSensitivity），因为这些选项控制的是换行与缩进逻辑，而非“强制插入空行”。

✅ 正确解法：利用 Emmet 的 空文本节点 {} 作为占位符。

Emmet 将 {} 解析为一个空的文本节点，在格式化时会将其渲染为独立一行（即换行符 + 缩进），从而在相邻标签间“撑开”一个空行。例如：

.tabs.js-tabs>.tabs__head+{}+.tabs__body

输入后按 Tab，将生成：

⚠️ 注意事项：

• {} 必须紧跟在 + 运算符后（表示兄弟关系），且前后不能有空格（如 .a+ {}+.b 会失效）；
• 该技巧仅在 Emmet 展开阶段生效（即 Tab 触发时），对已存在的 HTML 执行“格式化文档”（Shift+Alt+F）不会自动补空行；
• 若需批量处理现有代码，可配合正则替换：查找 >(\s*)ain)，替换为 >$1\n$1$2（需谨慎测试）；
• 推荐结合 Emmet 用户片段（emmet.json 或 settings.json 中的 emmet.extensionsPath）封装高频结构，例如：

// 在 settings.json 中添加
"emmet.snippets": {
  "html": {
    "tabs-block": ".tabs.js-tabs>.tabs__head+{}+.tabs__body"
  }
}

然后输入 tabs-block + Tab

即可一键生成带空行的标准 Tabs 结构。

总结：VS Code 原生无“同级元素间自动空行”的开关，但 Emmet 的 {} 是轻量、可靠、符合工作流的工程化方案——它把格式意图编码进模板本身，既可控又可复用，是前端开发中值得掌握的细节技巧。