掌握VS Code代码片段变量与转换可显著提升编码效率。合理使用$TM_SELECTED_TEXT、$TM_CURRENT_LINE等内置变量能实现动态内容插入，如选中代码包裹、日志打印；结合${variable:default}语法支持默认值与多点联动，实现类名、组件名自动同步；通过${variable/regex/format}正则转换可动态格式化文本，实现文件名转驼峰、移除前缀并首字母大写、添加CSS类前缀等功能；利用捕获分组与可选匹配模拟条件逻辑，结合环境变量生成命名空间前缀。例如从user-list.js提取UserList组件名，或根据选中文本创建React组件并默认导出。关键在于熟练掌握正则表达式与格式化语法的组合应用，逐步构建智能且灵活的代码片段。
在 VS Code 中编写代码片段时，合理使用变量和转换能极大提升效率。你不仅能快速插入动态内容，还能根据上下文自动调整输出格式。掌握这些技巧后，自定义代码片段会变得更加智能和灵活。
内置变量的实用场景
VS Code 提供多个开箱即用的变量，可以直接在代码片段中引用：
- $TM_SELECTED_TEXT：插入当前选中的文本，适合包裹操作，比如将一段代码包进 if 语句或函数调用
- $TM_CURRENT_LINE：获取光标所在行的内容，可用于日志输出或调试打印
- $TM_FILENAME 和 $TM_DIRECTORY：分别返回当前文件名和路径，适用于模块导出或注释头生成
- $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE：插入当前日期，常用于版权注释
例如，写一个日志片段：
log $TM_CURRENT_LINE -> console.log('$TM_CURRENT_LINE:', $TM_CURRENT_LINE);占位符与变量赋值
代码片段支持带默认值的变量，格式为 ${variable:default}。当变量未被定义时，会使用默认值，并且你可以通过占位符进行多点联动。
- 定义一个类名变量：${1:ClassName}，后续所有 $1 都会同步更新
- 结合选中文本使用：${1:$TM_SELECTED_TEXT}，如果选中了文本，则作为默认值；否则提示输入
比如创建 React 组件时，自动使用选中的函数名：
vercel-react-best-practices
下载
来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性
${2:content}
;
};
export default $1;
正则转换：重写插入内容
最强大的功能之一是使用正则表达式对变量进行转换，语法为 ${variable/regex/format/options}。这让你能动态修改文本格式。
- 将文件名转为驼峰命名：${TM_FILENAME/(.*)\.js/${1:/camel}/}
- 移除前缀并大写首字母：${1/(^_|^my)(.*)/${2:/pascal}/}，匹配 myButton 或 _button 并转为 Button
- 添加前缀用于 CSS 类名：${1:component}/${1/^(\w+)/prefix-$1/}
一个实际例子：从文件名生成组件名：
// File: user-list.js ${TM_FILENAME/(.*)\.js/${1:/pascal}/} → UserList嵌套转换与条件逻辑
虽然不支持真正意义上的条件判断，但可以通过分组捕获和可选匹配模拟简单逻辑。
- 使用 ()? 匹配可选部分：${1/(a)?(b)/${1:+hasA}-${2}/}，若 a 存在则输出 "hasA-b"
- 结合环境变量与默认值：${env:USER:-developer}，获取系统用户，失败则用 developer
这种技巧适合生成带命名空间的日志前缀或模块标识。
基本上就这些。变量和转换看似复杂，但一旦理解其模式，就能写出高度适应性的代码片段。关键是多尝试小例子，观察替换结果，逐步掌握正则与格式化语法的配合方式。
