VSCode中创建多占位符代码片段需配置JSON文件，使用$1、$2等顺序跳转，${1:name}实现同步编辑，${2:${1:default}}支持嵌套，默认值与转义（如\n、\$）确保格式正确。
如果您在 VSCode 中编写代码时希望快速插入结构化模板，并在多个位置进行自定义编辑，则需要创建带有多占位符的代码片段。以下是实现该功能的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、理解多占位符语法结构
VSCode 的代码片段使用 $1、$2、$3 等数字序号定义占位符，光标会按顺序停驻；${1:default} 可设置默认值；${1:name} 与 ${2:name} 同名时，输入一处将同步更新其余同名占位符。此机制是构建联动编辑行为的基础。
1、打开 VSCode，按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）调出命令面板。
2、输入并选择“Preferences: Configure User Snippets”。
3、选择目标语言（如 “javascript”）或点击“New Global Snippets file”创建全局片段。
4、在生成的 JSON 文件中，以键名作为触发词，值对象中填写 "prefix"、"body" 和 "description" 字段。
二、编写含顺序跳转占位符的片段
该方法适用于需依次填写不同内容的模板，例如函数声明中分别填入参数名、类型和返回值类型。
1、在 body 数组中按行书写代码，每行作为一个字符串元素。
2、在需要插入占位符的位置写入 $1、$2、$3，确保编号连续且无重复。
3、示例 body 内容：
["function ${1:name}(${2:param}: ${3:type}): ${4:returnType} {", "$0", "}"]
4、保存文件后，在对应语言的编辑器中输入 prefix 触发词，按 Tab 键即可逐个跳转编辑。
三、配置同名同步占位符实现联动编辑
当多个位置需保持内容一致（如变量声明与使用），可使用相同名称的占位符实现输入同步，避免手动重复修改。
1、在 body 中使用 ${1:defaultValue} 语法定义首个占位符。
2、在其他需要同步的位置写入 ${1}（不带默认值）或 ${1:defaultValue}（带相同默认值）。
3、例如定义 React 组件名时，在 import 行、函数名、export 行均使用 ${1:ComponentName}。
4、触发片段后，首次在任一 ${1:...} 处输入内容，其余所有 ${1} 将实时更新为相同文本。
四、嵌套占位符与条件默认值组合应用
通过 ${2:${1:default}} 实现二级占位符依赖一级占位符内容，常用于生成带前缀的变量或类名。
1、在 body 中写入 ${2:${1:base}}，表示第二个占位符默认值取自第一个占位符的当前值。
2、若第一个占位符未修改，第二个将显示 base；若已改为 item，则第二个默认变为 item。
3、可在同一行中多次使用 ${n:${m:default}} 构建层级关系。
4、注意嵌套深度不宜超过两层，否则可能造成跳转逻辑混乱或无法正确渲染。
五、使用转义与特殊字符控制格式
多占位符片段中若需保留制表符、换行或美元符号本身，必须显式转义，否则会被解析为占位符或变量引用。
1、在 body 字符串中用 \t 表示制表符，\n 表示换行符（JSON 字符串内需双反斜杠）。
2、要输出字面量 $ 符号，须写作 \$。
3、若占位符需出现在字符串内部（如 console.log("$1")），应写作 console.log("\$1")。
4、所有 body 行末尾不要添加逗号，JSON 最后一行也不加逗号，否则导致片段加载失败。
