VSCode中的代码片段变量与转换

VSCode代码片段支持变量和正则转换实现动态内容生成。内置变量如$TM_FILENAME_BASE、$RELATIVE_FILEPATH等可直接引用；占位符${1:default}支持默认值与命名；转换语法${var/(p)/(r)/o}可实现大小写变换、路径提取等，支持嵌套组合。

VSCode 的代码片段（Snippets）支持变量（Variables）和转换（Transformations），让你能动态生成内容，比如把文件名转为类名、提取路径中的某段、或根据输入自动补全大小写形式。关键在于理解 $1、${1:default}、${1:name} 这些占位符的嵌套用法，以及 ${1/(pattern)/(replacement)/options} 这种正则替换语法。

常用内置变量

VSCode 提供了一批开箱即用的变量，直接在 snippet body 中用 $VAR 或 ${VAR} 引用：

• $TM_FILENAME：当前文件名（含扩展名），如 user.service.ts
• $TM_FILENAME_BASE：不含扩展名的文件名，如 user.service
• $TM_DIRECTORY：当前文件所在绝对路径
• $RELATIVE_FILEPATH：相对于工作区根目录的相对路径，如 src/app/user/user.component.ts
• $CLIPBOARD：系统剪贴板内容（实时读取，粘贴后可立即用）
• $CURRENT_YEAR、$CURRENT_MONTH、$CURRENT_DATE：自动生成日期信息

带默认值与命名的占位符

用户可编辑的占位符支持默认值和名称，方便复用和识别：

• ${1:myDefault}：第一个 tabstop，初始显示 myDefault，光标停在此处可修改
• ${2:name}：第二个 tabstop，显示提示文字 name（仅提示，不作为默认值）
• ${1:service} ${1/(.+)/\u$1/g}：对第一个占位符内容做转换——首字母大写（\u 表示下一个字符大写）

变量转换（Transformations）

转换语法为 ${variable/(regex)/(replace)/options}，其中 variable 可以是内置变量、占位符，甚至另一个转换结果。常用操作：

Opus

AI生成视频工具

77

查看详情

• 小驼峰转大驼峰：${TM_FILENAME_BASE/(^|\.)(\w)/\u$2/g} → user.service → UserService
• 去点号并 PascalCase：${TM_FILENAME_BASE/(\.)(\w)/\u$2/g} → api.client → ApiClient
• 提取最后一级目录名：${RELATIVE_FILEPATH/.*\/(.+)\//\$1/} → src/pages/home/home.page.ts → home
• 全小写并用下划线连接：${1/\s+/_/g} → 输入 user profile → 输出 user_profile

嵌套与组合技巧

转换可以多层嵌套，也可以结合多个变量。例如创建 Angular 组件 snippet：

• 类名：${TM_FILENAME_BASE/(?:\.component)?\.(?:ts|html|scss)$//} → user-list，再套一层：${1/(^|-)(\w)/\u$2/g} → UserList
• selector：app-${TM_FILENAME_BASE/(?:\.component)?\.(?:ts|html|scss)$//} → app-user-list
• 模板中自动插入选中文字：${CLIPBOARD/([A-Z])/ $1/g} 把 MyComponent 变成 My Component

基本上就这些。写 snippet 时建议先试单个变量，再加转换，最后组合；VSCode 的 snippet 预览（Ctrl+Space 触发）会实时显示效果，调试起来很直观。

以上就是VSCode中的代码片段变量与转换的详细内容，更多请关注php中文网其它相关文章！