VSCode的代码片段变量怎么用？-VSCode-PHP中文网

VSCode的代码片段变量怎么用？

狼影

发布： 2025-09-28 13:38:02

原创

460人浏览过

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

vscode的代码片段变量怎么用？

在 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}

PhotoG

PhotoG是全球首个内容营销端对端智能体

121

查看详情

示例：创建一个 React 函数组件片段

"React Component": {
  "prefix": "rcomp",
  "body": [
    "import React from 'react';",
    "",
    "const ${1:ComponentName} = () => {",
    "  return (",
    "    <div>$2</div>",
    "  );",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "Create a functional component"
}

登录后复制

输入 rcomp 后，光标会先定位到组件名，你修改后，Tab 键跳到 $2，再 Tab 跳到 $0 结束。

使用选中文本作为变量

如果你先选中一段文本，然后触发代码片段，可以用 $TM_SELECTED_TEXT 把它嵌入进去。

比如写个“包裹成 div”的片段：

"wrap div": {
  "prefix": "divwrap",
  "body": [
    "<div class=\"container\">$TM_SELECTED_TEXT</div>"
  ]
}

登录后复制

选中文本后输入 divwrap，就能把选中内容自动包进 div。

基本上就这些。合理使用变量能让代码片段真正高效起来。

以上就是VSCode的代码片段变量怎么用？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

VSCode多光标编辑_批量处理高级技巧 VSCode注释系统进阶_文档生成与智能注释技巧 VSCode代码折叠定制_语义化区域折叠规则定义 VSCode语法分析_增量解析与错误恢复策略 VSCode配置层叠机制_多环境设置优先级管理