
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 规范的解决方案——它把控制权交还给开发者,在保持自动化的同时,赋予结构意图明确的表达能力。











