如何在 VS Code 中通过 Emmet 自动为 HTML 同级元素插入空行

这类同级块级元素之间 自动生成空行 （提升可读性与团队 代码规范），不能依赖格式化设置（如 html.format.wrapLineLength 或 Prettier 的 htmlWhitespaceSensitivity），因为这些选项控制的是换行与缩进逻辑，而非“强制插入空行”。

✅ 正确解法：利用 Emmet 的 空文本节点 {} 作为占位符。

Emmet 将 {} 解析为一个空的文本节点，在格式化时会将其渲染为独立一行（即换行符 + 缩进），从而在相邻标签间“撑开”一个空行。例如：

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

输入后按 Tab，将生成：

立即学习 “ 前端免费学习笔记（深入）”；

⚠️ 注意事项：

• {} 必须紧跟在 + 运算符后（表示兄弟关系），且前后 不能有空格（如 .a+ {}+.b 会失效）；
• 该技巧仅在 Emmet 展开阶段生效（即 Tab 触发时），对已存在的 HTML 执行“格式化文档”（Shift+Alt+F）不会自动补空行；
• 若需批量处理现有代码，可配合正则替换：查找 >(s*)ain)，替换为 >$1n$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 的 {} 是轻量、可靠、符合工作流的工程化方案——它把格式意图 编码 进模板本身，既可控又可复用，是 前端 开发中值得掌握的细节技巧。