vs code 默认不支持直接设置“在同级 html 元素间自动插入空行”，但可通过 emmet 的 `{}` 空文本节点技巧实现该效果，无需插件或复杂配置。
在 VS Code 中编写 HTML 时，若希望
和
这类同级块级元素之间自动生成空行（提升可读性与团队代码规范），不能依赖格式化设置（如 html.format.wrapLineLength 或 Prettier 的 htmlWhitespaceSensitivity），因为这些选项控制的是换行与缩进逻辑，而非“强制插入空行”。
✅ 正确解法：利用 Emmet 的 空文本节点 {} 作为占位符。
Emmet 将 {} 解析为一个空的文本节点，在格式化时会将其渲染为独立一行（即换行符 + 缩进），从而在相邻标签间“撑开”一个空行。例如：
.tabs.js-tabs>.tabs__head+{}+.tabs__body
输入后按 Tab，将生成：
<div class="tabs js-tabs">
<div class="tabs__head"></div>
<div class="tabs__body"></div>
</div>
⚠️ 注意事项：
- {} 必须紧跟在 + 运算符后（表示兄弟关系），且前后不能有空格（如 .a+ {}+.b 会失效）；
- 该技巧仅在 Emmet 展开阶段生效（即 Tab 触发时），对已存在的 HTML 执行“格式化文档”（Shift+Alt+F）不会自动补空行；
- 若需批量处理现有代码，可配合正则替换：查找 >(\s*)$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 的 {} 是轻量、可靠、符合工作流的工程化方案——它把格式意图编码进模板本身，既可控又可复用，是前端开发中值得掌握的细节技巧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
