VS Code 用 Emmet 缩写包裹代码的核心是选中内容后按 Ctrl+Shift+A（Win/Linux）或 Cmd+Shift+A（macOS），输入缩写如 div.my-class 回车即可生成对应标签，支持嵌套与变量语法如 {$#}。
vscode 用缩写包围单行或选中内容：核心是 Emmet + Wrap with Abbreviation
VS Code 默认就支持用 Emmet 缩写快速包裹代码，不需要装插件，但很多人按 Ctrl+Shift+P 搜不到命令，是因为没选中内容或触发条件不对。
- 必须先「选中一行或多行文本」（哪怕只选中几个字符也行），否则菜单里不显示该命令
- 快捷键是
Ctrl+Shift+A（Windows/Linux）或Cmd+Shift+A（macOS），不是Tab——Tab只在光标在标签末尾时补全，不用于包裹 - 输入缩写后回车，VS Code 会把选中内容塞进生成的标签中间，比如选中
hello，输div.my-class→ 得到<div class="my-class">hello</div> - 支持嵌套缩写：
ul>li*3会生成带 3 个<li></li>的<ul>，再把选中内容分别塞进每个<li>里
常见失败现象：为什么按了 Ctrl+Shift+A 没反应？
不是功能坏了，大概率是这几种情况之一：
- 当前文件类型未启用 Emmet：检查右下角语言模式（如显示 “Plain Text”），点它 → 选择对应语言（如
HTML、Vue、JavaScript React） - 设置了自定义键位冲突：打开
Ctrl+Shift+P→ 输入Preferences: Open Keyboard Shortcuts→ 搜wrap，确认Emmet: Wrap with Abbreviation绑定正确 - 在非编辑器区域（比如终端、设置页）触发：该命令只在代码编辑区生效
- 输入缩写后直接敲空格或方向键：必须按
Enter确认，其他键会中断流程
Wrap with Abbreviation 在不同语言下的行为差异
Emmet 的包裹逻辑会根据语言上下文自动调整输出格式，不是简单拼字符串：
- 在
HTML中：支持完整标签对，p.text→<p class="text">...</p> - 在
JavaScript或React中：默认用 JSX 语法，div→<div>...</div>，div#app→<div id="app">...</div> - 在
CSS文件中：不触发该命令（无意义），但若强行调用，会原样插入缩写文本，不解析 - 在
Markdown中：支持有限，em→*...*，strong→**...**，但div类标签不会生成 HTML
容易被忽略的细节：缩写里的 {} 和 $#
想让包裹后的内容带动态值或占位符？得靠 Emmet 的表达式语法：
-
div{Hello $}*：选中两行文本，会生成两个<div>Hello 1</div>和<div>Hello 2</div> -
span.my-class{$#}：把原内容保留，并加上类名，$#表示“原始选中内容” - 错误写法：
div{$#} hello——hello会被丢弃，Emmet 只认{}内部内容为替换目标 - 不加
{}就只是纯标签包裹，加了才能控制内容位置和变量插入
Ctrl+Shift+A，三步缺一不可。 
