vscode代码片段支持变量(如$1、$TM_FILENAME_BASE)和变量转换(${var/Regex/replacement/flags}),可智能生成文件名、接口名等;常用内置变量包括光标定位、文件路径、剪贴板内容等,转换语法支持正则替换与大小写处理,大幅提升模板灵活性。

VSCode 的代码片段(Snippets)支持变量(如 $1、$TM_FILENAME_BASE)和变量转换(${VAR/regex/replacement/flags}),合理使用能极大提升模板灵活性,尤其适合生成文件名、接口名、组件名等带规则的代码结构。
常用内置变量快速回顾
这些变量无需定义,直接在 snippet body 或 prefix 中使用:
-
$1,$2—— 光标跳转位置,数字越小越先被聚焦 -
$0—— 最终光标停留位置(退出 snippet 后的落点) -
$TM_FILENAME—— 当前文件名(含扩展名),如user.service.ts -
$TM_FILENAME_BASE—— 文件名不含扩展名,如user.service -
$TM_FILEPATH—— 绝对路径,如/src/app/user/user.service.ts -
$TM_DIRECTORY—— 文件所在目录路径 -
$CLIPBOARD—— 系统剪贴板内容(需启用"editor.suggest.snippetsPreventQuickSuggestions": false才能生效)
变量转换语法详解与实用技巧
转换格式为 ${VAR/regex/replacement/flags},其中 VAR 是任意变量(包括嵌套转换),regex 是 javaScript 风格正则表达式(注意:不支持 lookbehind/lookahead),replacement 支持 $1, $2 捕获组引用,flags 常用 g(全局)、i(忽略大小写)。
- 首字母大写:
${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}→User.service→UserService(注意:仅首字母大写,需配合多次转换) - 全部转驼峰(简单版):
${TM_FILENAME_BASE/[-_](.)/${1:/upcase}/g}→user-service→userService - 移除后缀再驼峰:
${TM_FILENAME_BASE/.service$//}/${TM_FILENAME_BASE/^(.*).service$/${1:/camelcase}/}(推荐拆成两步更清晰) - 多级转换嵌套(推荐):
${TM_FILENAME_BASE/.ts$//}先去扩展名,再套一层:${1/(^|[-_])([a-z])/${2:/upcase}/g}→user-list-item→UserListItem
实战:生成 angular Service 模板
假设当前文件是 auth.service.ts,想自动补全类名 AuthService、构造函数注入 private http: HttpClient、并导出常量 AUTH_SERVICE_TOKEN:
{ "Angular Service Template": { "prefix": "ngs", "body": [ "import { Injectable, InjectionToken } from '@angular/core';", "import { HttpClient } from '@angular/common/http';", "", "export const ${TM_FILENAME_BASE/(.*).service$/${1:/pascalcase}/}_TOKEN = new InjectionToken('${TM_FILENAME_BASE/(.*).service$/${1:/pascalcase}/}');", "", "@Injectable({", " providedIn: 'root'", "})", "export class ${TM_FILENAME_BASE/(.*).service$/${1:/pascalcase}/} {", " constructor(private http: HttpClient) { }", "}" ], "description": "Generate Angular service with token and pascal-cased name" } }
关键点:${1:/pascalcase} 是 VSCode 内置转换(5.0+ 支持),比手动正则更可靠;若版本低,可用 ${1/(^|[-_])([a-z])/${2:/upcase}/g} 替代。
避坑提醒与调试建议
变量转换容易出错,常见问题有:
- 正则中不能用
^和$匹配整个字符串开头结尾(VSCode 实际执行的是.replace(),非.test()),应确保模式覆盖目标部分 - 空捕获组或未匹配时,整个表达式会留空,建议先用简单替换验证逻辑,例如
${TM_FILENAME_BASE/.*/MATCHED/} - 调试方法:在 snippet body 中临时插入
// DEBUG: $TM_FILENAME_BASE = ${TM_FILENAME_BASE}查看原始值 - 避免过度嵌套,三层以上转换可读性骤降,优先拆成多个变量或用简单命名约定
基本上就这些。用好变量和转换,能让 snippet 从“填空题”升级为“智能生成器”。