17370845950

vs code 默认不支持直接设置“在 html 同级元素间自动插入空行”，但可通过 emmet 的 `{}` 空文本节点技巧，在缩写中显式声明换行位置，实现结构清晰、符合团队规范的自动格式化效果。

在 VS Code 中，原生 HTML 格式化（如 Shift+Alt+F 或保存时自动格式化）不会主动在同级块级元素之间插入空行——这是设计使然，因为 Prettier 和内置 HTML 语言服务更侧重语义正确性与最小化变更，而非视觉分隔。但你可以借助 Emmet 缩写语法，以声明式方式精准控制空白结构。

核心技巧是使用 {}：它代表一个空文本节点，在 Emmet 展开时会被渲染为一行空白（即换行符 + 缩进），从而在相邻元素间“撑开”空行。

✅ 正确用法示例：

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

输入后按 Tab，将生成：

⚠️ 注意事项：

• {} 必须作为独立节点参与运算（用 + 连接），不能写在标签内部（如 .tabs__head{} 是无效的）；
• 若需多空行，可叠加使用：+{}+{}+ → 生成两行空白；
• 该技巧依赖 Emmet 引擎，确保 VS Code 中已启用 Emmet（默认开启；检查设置中 emerald.emmet 相关选项是否未被禁用）；
• 对已存在代码，此方法仅适用于新建缩写展开场景；若要批量格式化现有文件，建议配合 Prettier 插件 + 自定义 prettier.config.js，启用 htmlWhitespaceSensitivity: 'ignore' 并结合 printWidth 控制换行逻辑（但无法精确控制“同级间空行”，仍需人工或脚本辅助）。

? 进阶提示：你还可以封装为自定义 Emmet 缩写（在 settings.json 中配置 emerald.emmet.extensionsPath 或使用 emerald.emmet.variables），例如定义：

"emerald.emmet.variables": {
  "tabGroup": ".tabs__head+{}+.tabs__body"
}

然后输入 tabs>tabGroup

总之，虽无全局开关一键启用“同级空行”，但 {} 是轻量、可靠且完全符合 Emmet 规范的解决方案——它把控制权交还给开发者，在保持自动化的同时，赋予结构意图明确的表达能力。