VSCode的代码片段变量：实现动态代码生成

vscode代码片段支持变量与占位符实现动态生成，如$TM_FILENAME_BASE可转PascalCase命名，${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}兼顾自动填充与手动编辑，提升开发效率。

VSCode 的代码片段（Snippets）支持变量（Variables）和占位符（Placeholders），能让你在插入代码时自动填充上下文信息，比如文件名、光标位置、当前时间、选中内容等——这正是实现轻量级动态代码生成的关键。

常用内置变量及其用途

VSCode 提供了一批开箱即用的变量，写在代码片段的 $ 或 ${} 中即可生效：

• $TM_FILENAME：当前文件名（含扩展名），如 index.ts
• $TM_FILENAME_BASE：文件名不含扩展名，如 index
• $TM_DIRECTORY：文件所在目录的绝对路径
• $CLIPBOARD：系统剪贴板内容（粘贴即用）
• $SELECTION：当前选中的文本（触发片段前需先选中）
• $CURRENT_YEAR、$CURRENT_MONTH、$CURRENT_DATE：自动生成日期信息
• $WORKSPACE_NAME：当前打开的工作区名称

用转换（transform）实现简单逻辑处理

变量可配合正则转换（transform）做大小写转换、前缀替换、移除扩展名等。语法为：${variable/Regex/replacement/flags}。

例如，在 react 组件片段中自动生成 PascalCase 的组件名：

"component": {   "prefix": "rc",   "body": [     "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {",     "  return <div></div>;",     "};",     "",     "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};"   ] }

这里 ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} 会把 user-list.tsx → UserList。

其他常用转换：/upcase（大写）、/downcase（小写）、/camelcase、/snakecase，都无需手写正则。

通用产品企业网站(.NET2.0)1.0

1、系统采用.net2.0开发，数据库access2、三层架构，数据层、逻辑层和表示层分离3、系统完全使用div＋css布局，可以灵活处理界面4、技术特点: 使用模板页，大大减少代码量 动态生成竖向导航菜单 ul li实现表格 各种自定义用户空间 Reapter等数据控件的灵活运用

0

查看详情

结合占位符与变量实现交互式生成

变量是静态上下文，占位符（如 ${1:default}）支持用户编辑。两者组合可兼顾自动化与灵活性：

• ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}：默认填入转换后的文件名，但允许你手动修改
• ${2:props}${3:?: ${SELECTION}}：第二个位置默认写 props，第三个位置若已有选中文本，则自动填入，否则留空可编辑

注意：占位符序号（$1, $2）决定跳转顺序，相同序号会同步更新（适合多处复用同一输入）。

进阶技巧：条件判断与嵌套转换（有限支持）

VSCode 原生不支持 if-else，但可用正则“模拟”简单分支。例如：仅当文件名含 .test. 时添加 describe 块：

${TM_FILENAME/(.*test.*)/describe('${TM_FILENAME_BASE}', () => {/}

更可靠的方式是配合插件（如 Regex Previewer）调试表达式，或把复杂逻辑交给任务脚本/自定义命令——片段本身适合轻量、确定性高的场景。

基本上就这些。变量不是万能的，但用好它，能省掉大量机械命名和重复填写，让代码生成真正“懂你”。