使用内置变量和占位符可提升VSCode代码片段效率:$TM_FILENAME、$CURRENT_YEAR等自动填充上下文,$1、$2定义跳转顺序,$TM_SELECTED_TEXT嵌入选中内容,实现动态代码生成。

在 VSCode 中,代码片段(Snippets)的变量能帮你快速生成动态内容。你可以在自定义代码片段中使用内置变量和占位符变量,让插入的代码更灵活。
常用内置变量
这些变量会在代码片段插入时自动替换为对应值:
- $TM_FILENAME:当前文件名
- $TM_FILENAME_BASE:当前文件名(不含扩展名)
- $TM_DIRECTORY:当前文件所在目录路径
- $TM_LINE_NUMBER:当前行号
- $TM_SELECTED_TEXT:编辑器中选中的文本(可用于包裹操作)
- $CURRENT_YEAR、$CURRENT_MONTH、$CURRENT_DATE:当前年月日
- $CLIPBOARD:剪贴板内容
"log with timestamp": {
"prefix": "logt",
"body": [
"console.log('$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE: $1');"
],
"description": "Log with date"
}
占位符变量与顺序跳转
你可以用 $1、$2... 来定义光标跳转位置,数字代表跳转顺序。$0 是最后一个位置。
占位符还能包含默认值:${1:defaultText}
Avactis是一个强大的PHP在线购物系统拥有多个版本包括开源版本。它具备一个在线购物系统所需要的所有功能从产品到会员管理,订单和营销。可以无限分类和为产品指定任务数量的图片(支持自动生成缩略图)。使用自定义字段功能,让你可以更好地定义一个产品。该系统提供以非常灵活的方式来创建任意类型的促销活动如设置折扣代码,基于价格的折扣或基于数量的折扣等。
"React Component": {
"prefix": "rcomp",
"body": [
"import React from 'react';",
"",
"const ${1:ComponentName} = () => {",
" return (",
" $2",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "Create a functional component"
}
输入 rcomp 后,光标会先定位到组件名,你修改后,Tab 键跳到 $2,再 Tab 跳到 $0 结束。
使用选中文本作为变量
如果你先选中一段文本,然后触发代码片段,可以用 $TM_SELECTED_TEXT 把它嵌入进去。
比如写个“包裹成 div”的片段:"wrap div": {
"prefix": "divwrap",
"body": [
"$TM_SELECTED_TEXT"
]
}
选中文本后输入 divwrap,就能把选中内容自动包进 div。
基本上就这些。合理使用变量能让代码片段真正高效起来。









