使用内置变量和占位符可提升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}
jQuery移动端和桌面设备的轻量级幻灯片特效源码是一款支持移动端和桌面设备的轻量级jQuery幻灯片插件swipeslider的特效。它支持图片和其它HTML内容,支持幻灯片内容无限循环播放。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器,是一款
"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。
基本上就这些。合理使用变量能让代码片段真正高效起来。









