通过正则表达式转换VS Code代码片段变量可提升效率，如用${TM_FILENAME_BASE/(.*)/\u$1/}将文件名转为PascalCase，结合捕获组和标志位实现智能命名，适用于React组件生成等场景。
在 VS Code 中开发代码片段（Snippets）时，变量转换结合正则表达式是提升效率的关键技巧。通过合理使用 占位符变量 和 正则替换语法，你可以让代码片段更智能、更灵活，减少手动修改的工作量。
变量与预定义变量基础
VS Code 代码片段支持多种内置变量，比如：
- $TM_FILENAME：当前文件名
- $TM_FILENAME_BASE：不含扩展名的文件名
- $SELECTION：选中的文本
- $CLIPBOARD：剪贴板内容
这些变量可以作为转换的输入源。例如，将文件名转换为 PascalCase 类名：
"ClassName": { "prefix": "class", "body": "class ${TM_FILENAME/(.*)\\.ts$/\\u$1/} {}" }正则表达式语法详解
VS Code 使用 JavaScript 风格的正则表达式进行变量转换，基本格式为：
${variableName/regex/replacement/flags}其中：
- regex：匹配模式，可用捕获组 ()
- replacement：替换内容，$1, $2 引用捕获组
- flags：常用 i（忽略大小写）、g（全局替换）、m（多行）
示例：将 kebab-case 文件名转为 CamelCase：
${TM_FILENAME_BASE/-(\\w)/\\u$1/g}如输入 user-profile.ts，输出 UserProfile。
实战场景：生成 React 组件模板
假设你希望根据文件名自动生成组件名，可编写如下片段：
"React Component": { "prefix": "reactcmp", "body": [ "import React from 'react';", "", "const ${TM_FILENAME_BASE/(.*)/\\u$1/} = () => {", " return${TM_FILENAME_BASE}
;",
"};",
"",
"export default ${TM_FILENAME_BASE/(.*)/\\u$1/};"
]
}
当你在 header.tsx 文件中输入 reactcmp，自动补全为 Header 组件。
高级技巧：条件化处理与多步转换
虽然 VS Code 不支持 if-else 判断，但可通过多个捕获组和选择性替换模拟逻辑。例如，去除前缀并首字母大写：
${TM_FILENAME_BASE/(?:view|component)-(\\w+)/\\u$1/}匹配 view-button.ts 或 component-card.ts，统一转为首字母大写的单词。
基本上就这些。掌握变量替换和正则表达式后，你的代码片段就能真正“懂你”。不复杂但容易忽略细节，建议多试几个文件名验证效果。
