VSCode如何实现代码模板快速生成 VSCode文件片段自动创建的技巧-VSCode-PHP中文网

VSCode如何实现代码模板快速生成 VSCode文件片段自动创建的技巧

雪夜

发布： 2025-08-01 17:46:01

原创

583人浏览过

打开用户代码片段配置：通过文件 -> 首选项 -> 用户代码片段，选择对应语言如javascript.json；2. 定义代码片段：在json文件中设置名称、触发词prefix、代码体body（含$1、$2光标位）、描述description；3. 使用代码片段：在对应语言文件中输入触发词如log或rcomp，按tab键即可生成代码；4. 支持复杂模板：可包含多行代码、变量如$current_year、$tm_filename_base等，实现动态内容插入；5. 共享与管理：通过vscode同步功能跨设备同步，纳入git版本控制，或打包为扩展发布至市场，也可用snippet manager等工具增强管理。正确配置后，输入触发词即可快速生成代码，显著提升开发效率。

VSCode如何实现代码模板快速生成 VSCode文件片段自动创建的技巧

VSCode 代码模板，也就是文件片段，能帮你快速生成常用代码结构，提高效率。核心在于配置

snippets

登录后复制

，定义好代码块，然后输入触发词就能自动生成。

解决方案：

打开用户代码片段配置：
```
文件 -> 首选项 -> 用户代码片段
```
登录后复制
，选择对应语言，比如
```
javascript.json
```
登录后复制
。
定义代码片段：在
```
.json
```
登录后复制
文件中，定义你的代码片段。结构如下：

{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
}

登录后复制

```
"Print to console"
```
登录后复制
: 片段的名称，随意命名。
```
"prefix"
```
登录后复制
: 触发词，输入
```
log
```
登录后复制
就会弹出这个代码片段。
```
"body"
```
登录后复制
: 代码片段的内容，
```
$1
```
登录后复制
,
```
$2
```
登录后复制
是光标停留的位置，按
```
Tab
```
登录后复制
键切换。
```
"description"
```
登录后复制
: 片段的描述，在提示中显示。

使用代码片段：在
```
.js
```
登录后复制
文件中，输入
```
log
```
登录后复制
，按下
```
Tab
```
登录后复制
键，就会自动生成
```
console.log('');
```
登录后复制
，光标停留在引号中间。

如何创建更复杂的代码模板？

复杂的代码模板可以包含多行代码、变量、甚至简单的逻辑。例如，创建一个 React 组件模板：

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

登录后复制

这个模板中，

rcomp

登录后复制

是触发词，输入后会自动生成一个 React 函数组件，

ComponentName

登录后复制

和

Content

登录后复制

是光标停留的位置，方便你快速修改组件名称和内容。

import React from 'react';

登录后复制

这行代码也直接包含了，省去了手动输入的麻烦。

代码片段的变量有哪些？

VSCode 代码片段支持一些内置变量，可以让你更灵活地生成代码。常用的变量包括：

GPT-MINUS1

通过在文本中随机地用同义词替换单词来愚弄GPT

查看详情

```
$CURRENT_YEAR
```
登录后复制
: 当前年份。
```
$CURRENT_MONTH
```
登录后复制
: 当前月份（数字）。
```
$CURRENT_DATE
```
登录后复制
: 当前日期。
```
$CURRENT_HOUR
```
登录后复制
: 当前小时。
```
$CURRENT_MINUTE
```
登录后复制
: 当前分钟。
```
$CURRENT_SECOND
```
登录后复制
: 当前秒数。
```
$TM_FILENAME
```
登录后复制
: 当前文件名。
```
$TM_FILENAME_BASE
```
登录后复制
: 当前文件名（不带后缀）。
```
$TM_DIRECTORY
```
登录后复制
: 当前文件所在目录。
```
$TM_FILEPATH
```
登录后复制
: 当前文件完整路径。

例如，在注释中自动添加创建时间：

{
  "Comment with Date": {
    "prefix": "cdate",
    "body": [
      "/**",
      " * Created by: Your Name",
      " * Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
      " */"
    ],
    "description": "Add comment with current date and time"
  }
}

登录后复制