代码片段通过内置变量和格式化功能提升开发效率，如 $TM_FILENAME、$CURRENT_YEAR 可动态插入文件名和时间，结合正则替换与占位符 ${1:default} 实现智能模板，适用于创建 React 组件等场景，增强复用性与一致性。
在 VSCode 中，代码片段（Snippets）是提升开发效率的利器。通过使用变量，你可以创建动态、智能且可复用的代码模板。这些变量会在插入片段时自动填充内容，比如文件名、时间、光标位置等，让代码生成更灵活。
常用内置变量
VSCode 提供了一些开箱即用的变量，可以直接在代码片段中使用：
- $TM_FILENAME：当前文件的文件名（包含扩展名）
- $TM_FILENAME_BASE：当前文件的名称（不含扩展名）
- $TM_DIRECTORY：当前文件所在目录的完整路径
- $TM_LINE_INDEX：当前行的起始索引（通常为 0）
- $TM_LINE_NUMBER：当前行号（从 1 开始）
- $TM_SELECTED_TEXT：编辑器中选中的文本（可用于包裹操作）
- $SELECTION：同 $TM_SELECTED_TEXT
- $CLIPBOARD：系统剪贴板的内容
- $CURRENT_YEAR：当前年份（如 2024）
- $CURRENT_MONTH：当前月份（01-12）
- $CURRENT_DATE：当前日期（01-31）
- $CURRENT_HOUR：当前小时（24 小时制）
- $CURRENT_MINUTE：当前分钟
- $CURRENT_SECOND：当前秒数
- $BLOCK_COMMENT_START：当前语言的块注释开始符号（如 /*）
- $BLOCK_COMMENT_END：块注释结束符号（如 */）
- $LINE_COMMENT：行注释符号（如 //）
- $WORKSPACE_FOLDER：当前工作区根路径
变量格式化（使用正则替换）
你可以对变量值进行格式化处理，使其符合命名规范或业务需求。语法为：
${variable_name/regex/format_string/options}例如：
- ${TM_FILENAME/(.*)\.ts/${1}/}：去掉 .ts 扩展名
- ${TM_FILENAME_BASE/(^|\s)(\w)/${1}${2:/upcase}/g}：将文件名转为首字母大写格式（PascalCase）
- $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE 可组合成日期字符串
占位符与默认值
除了变量，你还可以定义带默认值的占位符，方便快速编辑：
- ${1:default_text}：第一个可跳转的制表位，显示默认文本
- ${2:second_value}：第二个制表位
- $0：最终光标停留位置（可省略）
结合变量和占位符，可以写出高度实用的片段。例如创建一个 React 组件模板：
"React Component": {
"prefix": "rcomp",
"body": [
"import React from 'react';",
"",
"interface ${TM_FILENAME_BASE}Props {",
" children?: React.ReactNode;",
"}",
"",
"const ${TM_FILENAME_BASE} = ({ children }: ${TM_FILENAME_BASE}Props) => {",
" return (",
" <div>",
" $1",
" </div>",
" );",
"};",
"",
"export default ${TM_FILENAME_BASE};",
"$0"
],
"description": "Create a React component with filename-based name"
}
动态逻辑与条件表达式（有限支持）
VSCode 原生不支持 if-else 条件判断，但可以通过正则捕获组模拟简单逻辑。例如，仅当变量匹配某模式时才输出内容：
${TM_FILENAME/(.+)\.test\.ts/${1}_test/g}
这个表达式只在文件名为 xxx.test.ts 时才会替换并输出 xxx_test。
基本上就这些。合理利用变量和格式化功能，能让代码片段真正“活”起来，减少重复劳动，保持项目结构一致性。不复杂但容易忽略细节，建议多试验几个组合找到最适合团队规范的模板写法。
