VSCode中的代码片段占位符与选择

vscode代码片段支持占位符（如${1:default}）和选择（如${1|a,b|}），实现光标跳转、默认值填充与下拉选项选择，配合变量可提升补全效率与上下文适配性。

vscode 的代码片段（snippets）支持占位符（placeholder）和选择（choice），让你在插入片段时能快速定位编辑位置、提供预设选项，提升补全效率和准确性。

占位符：定义可编辑的默认位置

占位符用 $1、$2 等数字标识，代表光标依次停留的位置；也可用 ${1:default} 设置默认值。多个同编号占位符会同步更新（如 `${1:name}` 出现三次，改一处，三处都变）。

常见写法示例：

• "${1:arg}" —— 光标停在 arg 处，可直接修改
• "${2:undefined}" —— 第二个跳转位置，默认显示 undefined
• "${3:|true,false|}" —— 这其实是“选择”，不是纯占位符（见下文）

选择：提供下拉式预设选项

选择是占位符的一种扩展形式，语法为 ${1|one,two,three|}，插入后会显示下拉菜单，支持键盘方向键或鼠标选择其中一项，选中后自动填充并跳到下一个占位符。

注意点：

• 选项之间用英文逗号分隔，不能有空格（one,two ✅，one, two ❌）
• 选项内容支持任意字符串，包括引号、冒号等，但需避免语法冲突（如嵌套 | 需转义）
• 选择项一旦选定，该占位符就“固化”为所选值，不再可编辑（除非手动删掉重来）

组合使用：让片段更智能

你可以把选择和默认值、嵌套占位符结合。例如定义一个 http 方法片段：

Whimsical

Whimsical推出的AI思维导图工具

182

查看详情

"http request": {   "prefix": "req",   "body": [     "fetch('${1:url}', {",     "  method: '${2|GET,POST,PUT,DELETE|}',",     "  headers: { 'Content-Type': '${3:application/json}' },",     "  body: ${4:json.stringify($5)}",     "});"   ] }

插入后：先填 URL → 选择方法 → 编辑 Content-Type → 填写 body（其中 $5 是嵌套在 $4 里的次级占位符）。

进阶技巧：条件与变量辅助

虽然原生不支持“逻辑判断”，但可借助内置变量（如 $TM_FILENAME_BASE、$CLIPBOARD）减少输入。例如：

• "class ${1:$TM_FILENAME_BASE} { $0 }" —— 默认类名取当前文件名
• "const ${1:name} = $CLIPBOARD;" —— 直接粘贴剪贴板内容作为初始值

选择和占位符本身不执行逻辑，但配合变量能让默认行为更贴合上下文。

基本上就这些。用好占位符和选择，片段就不再是静态模板，而成了带引导、有记忆、能联动的高效输入助手。