17370845950

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 后将生成：

⚠️ 注意事项：

• {} 必须作为独立节点参与运算（即用 + 连接），不可写成 .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 元素间距——这是轻量、可靠且符合前端工程习惯的实践方案。