vs code 默认不支持直接通过设置为 html 同级标签自动添加空行，但可通过 emmet 的 `{}` 空文本节点技巧，在缩写中显式声明换行位置，实现结构清晰、符合团队规范的 html 自动格式化。
在 VS Code 中，Emmet 是 HTML（及 CSS、JS 等）快速编码的核心引擎，但它默认不会在同级元素之间插入空行——这与 Prettier 或 ESLint 等工具的“格式化”行为不同，而是属于“展开（expand）”阶段的结构控制。幸运的是，Emmet 提供了一个轻量却高效的解决方案：使用 {} 作为空文本节点占位符。
{} 在 Emmet 中代表一个空的文本节点，它本身不渲染内容，但在格式化时会被解析为一行空白（即换行 + 缩进），从而在相邻元素间“撑开”视觉间距。你只需将其插入缩写表达式中两个兄弟片段之间即可。
例如，针对你的 .tabs 组件结构，可这样编写 Emmet 缩写：
.tabs.js-tabs>.tabs__head>div.tabs__nav+{}+.tabs__body>div.tab按下 Tab 键后，VS Code 将展开为：
立即学习“前端免费学习笔记（深入）”；
<div class="tabs js-tabs">
<div class="tabs__head">
<div class="tabs__nav"></div>
</div>
<div class="tabs__body">
<div class="tab"></div>
</div>
</div>✅ 注意事项：
- {} 必须直接置于两个兄弟选择器之间（如 A+{}+B），不可包裹在括号或嵌套结构中；
- 若已启用 Prettier 或内置 HTML 格式化（如 "html.format.wrapLineLength": 120），建议关闭其自动折叠空行功能（检查 html.format.preserveNewLines 是否为 true）；
- 此法适用于所有 Emmet 支持的语法（HTML、Slim、Pug 等），但不改变最终 DOM 结构，仅优化源码可读性；
- 如需全局生效（如所有 .container > .header + .main + .footer 类型结构），可将常用模式保存为 Emmet 用户片段。
总结：虽然 VS Code 没有“自动为同级 HTML 元素加空行”的开关，但借助 Emmet 的 {} 占位符，你能在编码瞬间精准控制空白逻辑——既保持自动化效率，又兼顾语义分组与团队协作可维护性。
