vs code 默认不支持直接通过设置为 html 同级标签间插入空行，但可通过 emmet 的 `{}` 空文本节点技巧，在代码片段中强制生成换行，实现语义清晰、可读性强的 html 结构。
在 VS Code 中，Emmet 是默认启用的高效 HTML/CSS 编码工具，它支持通过简洁缩写快速生成结构化代码。虽然 VS Code 本身没有“在同级元素间自动插入空行”的原生设置（如 Prettier 或 HTML Format 插件也未提供该粒度的格式化选项），但我们可以通过 Emmet 的特殊语法巧妙达成目标。
核心技巧是：在两个兄弟元素之间插入一个空的文本节点 {}。Emmet 会将其渲染为一个换行符（即 \n），并在格式化时保留该空白行，从而自然分隔同级块级元素。
✅ 正确用法示例：
.tabs.js-tabs>.tabs__head+{}+.tabs__body按下 Tab 后将生成：
立即学习“前端免费学习笔记（深入）”；
<div class="tabs js-tabs">
<div class="tabs__head"></div>
<div class="tabs__body"></div>
</div>⚠️ 注意事项：
- {} 必须作为独立节点参与运算（即用 + 连接），不可写成 .tabs__head{}+.tabs__body（这会导致语法错误）；
- 该方法依赖 Emmet 的展开逻辑，不是格式化（Format Document）行为，因此需在编写阶段主动使用，而非对已有代码一键补空行；
- 若你已安装 Prettier，需确保其 HTML 格式化规则（如 htmlWhitespaceSensitivity）不会意外删除空行；建议设为 "css" 或 "ignore" 模式以兼容手动空行；
- 对于复杂嵌套（如含注释或文本内容），{} 仍有效，但建议配合缩进保持可读性，例如：
.tabs>.tabs__head>(.tabs__nav)+{}+.tabs__body>(.tab)
? 进阶提示：你还可以将常用结构保存为自定义 Emmet 缩写。在 VS Code 设置中搜索 emmet.variables 或编辑 settings.json，添加：
"emmet.variables": {
"tabGroup": ".tabs.js-tabs>.tabs__head+{}+.tabs__body"
}之后输入 tabGroup + Tab 即可复用该带空行的结构。
总结：无需插件、不改设置，仅靠 Emmet 的 {} 语法，就能在编码源头精准控制 HTML 元素间距——这是轻量、可靠且符合前端工程习惯的实践方案。
