VSCode如何实现代码模板快速生成 VSCode代码模板的创建与应用方法

絕刀狂花 2025-08-07 12:00 1010浏览原创

打开用户代码片段配置：通过菜单或快捷键进入配置；2. 选择语言或创建全局片段；3. 编辑json格式的代码片段，定义名称、触发词、主体和描述；4. 使用$0、${1:placeholder}等占位符实现光标定位与多行输入；5. 利用$current_year、$tm_filename等变量动态插入信息；6. 保存后输入触发词加tab即可生成代码；7. 通过复制.json文件或使用插件共享管理片段，建议定期备份。

VSCode代码模板，也叫代码片段（Snippets），它能让你告别重复劳动，效率起飞！简单来说，就是预先定义好一段代码，然后通过一个简短的触发词，就能快速插入到你的代码中。

如何才能玩转VSCode的代码模板呢？

解决方案

打开用户代码片段配置：
- ```
文件
```
  ->
```
首选项
```
  ->
```
用户代码片段
```
  。
- 或者直接快捷键：
```
Ctrl+Shift+P
```
  (Windows/Linux) 或
```
Cmd+Shift+P
```
  (macOS)，输入
```
snippet
```
  ，选择
```
首选项: 配置用户代码片段
```
  。
选择语言：
- VSCode会提示你选择一个语言，比如
```
javascript
```
  、
```
python
```
  、
```
html
```
  等。
- 也可以选择
```
新建全局代码片段文件...
```
  ，这样定义的代码片段可以在所有语言中使用。
编辑代码片段文件：
- VSCode会打开一个
```
.json
```
  文件，这就是用来定义代码片段的地方。
- 文件的结构是这样的：
```
{
    "Snippet Name": {
        "prefix": "trigger",
        "body": [
            "// Your code here",
            "$0"
        ],
        "description": "Description of the snippet"
    }
}
```
- ```
Snippet Name
```
  ：代码片段的名字，随便起，方便自己识别就行。
- ```
prefix
```
  ：触发词，也就是你输入什么来激活这个代码片段。
- ```
body
```
  ：代码片段的主体，是一个字符串数组，每一行代表一行代码。
- ```
description
```
  ：代码片段的描述，可选。
- ```
$0
```
  ：光标最终停留的位置。

编写你的代码片段：

举个例子，如果你想创建一个快速生成React函数组件的代码片段，可以这样写：

{
    "React Functional Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "function ${1:ComponentName}() {",
            "  return (",
            "    <div>",
            "      ${2:content}",
            "    </div>",
            "  );",
            "}",
            "",
            "export default ${1:ComponentName};",
            "$0"
        ],
        "description": "React Functional Component"
    }
}

```
rfc
```
就是触发词，输入
```
rfc
```
然后按
```
Tab
```
键，就能生成这段代码。
```
${1:ComponentName}
```
和
```
${2:content}
```
是占位符，生成代码后，光标会先停留在
```
ComponentName
```
上，你可以直接输入组件名，然后按
```
Tab
```
键，光标会跳到
```
content
```
上，继续输入内容。
```
$0
```
表示最终光标停留的位置。

保存文件：
- 保存
```
.json
```
  文件，代码片段就生效了。
使用代码片段：
- 在你的代码文件中，输入你定义的触发词（比如
```
rfc
```
  ），然后按
```
Tab
```
  键，就能看到代码片段自动生成了。

副标题1

如何让代码片段支持多行输入？

在

body

数组中，每一项代表一行代码。如果你想在代码片段中插入多行文本，可以直接在数组中添加多行字符串。例如，你想创建一个包含多行注释的代码片段：

{
    "Multi-line Comment": {
        "prefix": "mlc",
        "body": [
            "/**",
            " * This is a multi-line comment.",
            " * You can add more lines here.",
            " */",
            "$0"
        ],
        "description": "Multi-line comment"
    }
}

输入

mlc

然后按

Tab

键，就能生成多行注释。

副标题2

如何在代码片段中使用变量？

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

```
$CURRENT_YEAR
```
：当前年份。
```
$CURRENT_MONTH
```
：当前月份（数字）。
```
$CURRENT_DATE
```
：当前日期。
```
$CURRENT_HOUR
```
：当前小时。
```
$CURRENT_MINUTE
```
：当前分钟。
```
$TM_FILENAME
```
：当前文件名。
```
$TM_FILENAME_BASE
```
：当前文件名（不包含后缀）。
```
$TM_DIRECTORY
```
：当前文件所在的目录。

例如，你想创建一个自动添加版权信息的代码片段：

{
    "Copyright Notice": {
        "prefix": "copyright",
        "body": [
            "/**",
            " * Copyright (c) $CURRENT_YEAR, Your Name",
            " * All rights reserved.",
            " */",
            "$0"
        ],
        "description": "Copyright notice"
    }
}

输入