VSCode原生支持选中即包裹:启用自动闭合符号后,选中文本按引号或括号键即可包裹;Shift+(/{/[为快捷包裹组合键;Emmet的Ctrl+Shift+G用于HTML/JSX缩写包裹;逻辑结构需用snippet,依赖$TM_SELECTED_TEXT变量。

选中后按引号、括号直接包裹是原生功能,不是插件
VSCode 默认就支持「选中即包裹」:只要启用了自动闭合符号,选中一段文本(比如 foo),再按 "、'、`、(、[、{ 中的任意一个,就会自动变成 "foo"、(foo) 等。这个行为不依赖插件,也不需要配置快捷键绑定。
常见失效原因:
- 设置里
Editor › Auto Closing Brackets或Editor › Auto Closing Quotes被关了(默认是开启的) - 当前语言模式不支持,比如在
.txt文件里可能不响应;右下角点开语言标识,手动切到JavaScript或HTML就行 - 误把光标停在括号外或空格上——必须确保选区干净,首尾无多余空白或换行
Shift + ( ) / { } / [ ] 是 Windows/Linux 下最顺手的包裹组合键
不用打开命令面板,也不用记新快捷键:选中文本后,直接按 Shift + (、Shift + { 或 Shift + [,就能分别包裹成 (...)、{...}、[...]。macOS 用户同理,用 Shift + ( 等即可(注意不是 Cmd)。
这个操作本质是触发 VSCode 的「自动插入配对符号」逻辑,但前提是:
- 选区不能跨多行(除非你用的是
{,它对多行内容也友好) - 当前语言支持该符号语义,比如在 JSON 里
(不会被包裹,但在 JS/TS 里可以 -
Editor › Auto Closing Brackets必须设为languageDefined或always
Ctrl+Shift+G 是 Emmet 包裹 HTML/JSX 的真正快捷键
想把 hello 一键变成 <div class="box">hello</div>?用 Ctrl+Shift+G(Windows/Linux)或 Cmd+Shift+G(macOS)——这是 Emmet 的「Wrap with Abbreviation」命令的默认快捷键。
但它只在特定语言下生效:
- 必须是
html、jsx、tsx、vue、svelte等支持 Emmet 的语言模式 - 如果按了没反应,先看右下角语言标识是不是
Plain Text或JavaScript(非 React);点开切换成JavaScript React再试 - 缩写要合法:
div.my-class✅,div .my-class❌(空格导致静默失败) - JSX 中输入
input会生成<input />,不是<input></input>
自定义代码块包裹要用 snippet,别硬凑快捷键
Emmet 对 if、try/catch、iife 这类逻辑结构不友好,这时候得靠用户 snippet。例如,在 javascript.json 里加:
"Wrap in try-catch": {
"prefix": "trywrap",
"body": [
"try {",
"\t$TM_SELECTED_TEXT",
"} catch (err) {",
"\tconsole.error(err);",
"}"
],
"description": "Wrap selected code in try-catch"
}
之后选中文本 → Ctrl+Shift+P → 输入 Insert Snippet → 选 trywrap。不要试图给每个 snippet 都绑快捷键,when 条件难写还容易冲突;用命令面板调用更稳,且能模糊搜索前缀。
真正容易被忽略的是:snippet 中的 $TM_SELECTED_TEXT 变量只在「有选区时」才生效;如果没选中任何内容,它会留空,而不是报错或提示——结果就是生成一堆空行。


















