emmet_wrap_with_abbreviation是唯一稳解,专为包裹设计,支持属性、嵌套、重复生成且自动闭合,但要求语法为html/javascript,选中后调用命令输入合法emmet缩写即可。

用 emmet_wrap_with_abbreviation 是唯一稳解
别手敲 <div>、别硬套多光标——除非你确定结构简单且无嵌套。这个命令专为包裹设计,支持属性、嵌套、重复生成,且自动闭合。前提是文件语法必须是 HTML / JavaScript(右下角显示 Plain text 或 Markdown 时必然失败)。
<ul>
<li>选中目标文本(可以是纯文本、多行代码、甚至已有标签)</li>
<li>按 <code>Ctrl+Shift+P 打开命令面板,输入 Wrap with Abbreviation 回车
div.item、ul>li*、section>header+main
$(如 span{$}),每行内容会成为独立文本节点
Ctrl+Shift+G 没反应?先查这三件事
这个快捷键本质就是调用 emmet_wrap_with_abbreviation,但它对上下文极其敏感,静默失效很常见。
- 当前语法不是 HTML / JavaScript:右下角点开语法名,手动切到
HTML - 输入法是中文:按下
Ctrl+Shift+G后键盘输入被拦截,缩写根本没提交 - 选区含空行或首尾空白符过多:Emmet 拒绝解析,不报错也不响应
ul>li* 只生成一个 <li>?因为你没拆光标
Emmet 的 * 运算符只在「每行一个独立选中单元」时才逐行展开。鼠标拖选连续多行,默认整块是一个选区,ul>li* 就只会套一层 <ul><li>...</li></ul>。
- 正确做法:先用
Ctrl+L(Win/Linux)或Cmd+L(macOS)逐行选中,再按Ctrl+Shift+L拆成多光标 - 然后按
Ctrl+Shift+G,输入ul>li(不加*)回车,每行自动变成独立<li>并包裹进<ul></ul> - 如果输
ul>li*3,它会把整块内容复制三遍塞进一个<li>,不是你想要的效果
自定义快捷键绑定,command 名写错就白配
wrap_with_tag 和 wrap_with_abbreviation 是两个完全不同的命令,行为差异极大,混用必翻车。
-
wrap_with_tag:原生命令,只接受div、p这类纯标签名,不支持.、>、* -
wrap_with_abbreviation:Emmet 命令,支持完整缩写,但必须加context限定,否则 JS 文件里按快捷键也会弹出 HTML 包裹框 - 错误示例:
"command": "wrap_with_tag"却想输section>header→ 直接忽略输入
最易被忽略的点是:Emmet 对特殊字符(如 &、)会自动转义,而多光标手敲不会。如果你处理的是 API 返回字段或用户输入文本,漏掉这点会导致 HTML 渲染异常。











