VSCode代码片段支持动态内容生成：①基础变量如${TM_FILENAME}插入上下文信息；②转换语法${var/regex/rep/flags}实现正则替换；③${var:-default}提供默认值；④$1、$2实现多光标联动；⑤配合Command Variable扩展执行shell命令。
如果您在VSCode中编写代码片段时希望动态生成内容，例如基于文件名、光标位置或用户输入生成特定格式的代码，则需要理解代码片段变量及其转换语法。以下是实现该功能的具体方法：
本文运行环境：MacBook Pro，macOS Sequoia。
一、基础变量用法
VSCode内置一组预定义变量，可在代码片段中直接引用，用于插入当前上下文信息。这些变量在展开片段时自动解析为实际值，无需额外配置。
1、打开命令面板（Cmd+Shift+P），输入“Preferences: Configure User Snippets”并回车。
2、选择“New Global Snippets file”，命名为“common.code-snippets”。
3、在右侧JSON编辑区添加如下片段：
"logFileName": {
"prefix": "logfn",
"body": ["console.log('${TM_FILENAME} loaded');"]
}
4、在任意JavaScript文件中键入"logfn"并按Tab，将插入包含当前文件名的console语句。
二、变量转换语法
变量转换允许对原始变量值执行正则替换，从而生成符合命名规范或结构要求的输出。语法为${variable/regex/replacement/flags}，其中flags可选g、i、m等标准JavaScript标志。
1、在同一个snippets文件中新增片段：
"classFromFilename": {
"prefix": "cls",
"body": ["class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} {",
" constructor() {}",
"}"]
}
2、新建文件名为"user-service.js"，在其中输入"cls"并按Tab。
3、将生成class UserService { … }，其中${TM_FILENAME_BASE}提取不含扩展名的文件名，/(.*)/匹配全部，${1:/pascalcase}将其转为首字母大写的驼峰形式。
三、条件判断与默认值
通过嵌套语法可实现变量存在性判断和默认值回退，避免空值导致片段异常。支持${variable:-default}（变量为空时取默认）、${variable:+alternative}（变量非空时取替代）等模式。
1、添加新片段：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
"logWithOptionalTag": {
"prefix": "logt",
"body": ["console.log('${1:tag:-INFO}', '${2:msg}');"]
}
2、键入"logt"并按Tab，光标首先停在第一个占位符，输入"DEBUG"后按Tab跳至第二个占位符。
3、若未修改第一个占位符，其值保持为INFO，即${1:tag:-INFO}中冒号后的内容作为默认文本显示。
四、多光标与顺序占位符
使用数字索引的占位符（如$1、$2）可定义编辑焦点顺序，配合$0指定最终光标位置；同一索引多次出现会同步更新，形成多光标联动效果。
1、添加片段：
"reactComponent": {
"prefix": "rcomp",
"body": ["import React from 'react';",
"",
"export default function ${1:ComponentName}() {",
" return (
${1:ComponentName};
);
}",
""]
}
2、键入"rcomp"并按Tab，光标定位到$1处，输入"MyButton"。
3、按Tab跳至$0（即函数体内部），此时首行函数名与JSX标签中的MyButton已同步更新。
五、Shell命令变量扩展
在支持shell执行的系统上（如macOS/Linux），可使用$TM_CURRENT_LINE变量结合外部命令进行动态计算，但需确保VSCode以终端环境启动，且命令路径已加入PATH。
1、确保终端中能直接运行date命令，例如输入date +%Y-%m-%d返回2024-06-15。
2、在snippets文件中添加：
"dateStamp": {
"prefix": "date",
"body": ["// Generated on: ${command:extension.commandvariable.date}"]
}
3、安装扩展Command Variable，并在settings.json中配置：
"commandVariable.commands": {
"date": {
"command": "date '+%Y-%m-%d'",
"shell": true
}
}
4、键入"date"并按Tab，插入形如“// Generated on: 2024-06-15”的注释行。
