VSCode如何实现代码模板快速生成 VSCode代码模板的创建与应用方法-小浪学习网

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

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

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

输入