打开用户代码片段配置：通过菜单或快捷键进入配置；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会提示你选择一个语言，比如
-
编辑代码片段文件：
- VSCode会打开一个
.json
文件，这就是用来定义代码片段的地方。 - 文件的结构是这样的：
{ "Snippet Name": { "prefix": "trigger", "body": [ "// Your code here", "$0" ], "description": "Description of the snippet" } }Snippet Name
：代码片段的名字，随便起，方便自己识别就行。prefix
：触发词，也就是你输入什么来激活这个代码片段。body
：代码片段的主体，是一个字符串数组，每一行代表一行代码。description
：代码片段的描述，可选。$0
：光标最终停留的位置。
- VSCode会打开一个
-
编写你的代码片段：
- 举个例子，如果你想创建一个快速生成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"
}
}输入
copyright然后按
Tab键，就能生成包含当前年份的版权信息。
副标题3
如何共享和管理代码片段？
你可以将你的代码片段文件分享给其他人，或者将别人的代码片段文件导入到你的VSCode中。只需要将
.json文件复制到对应的语言目录下即可。
另外，你也可以使用一些VSCode插件来管理代码片段，比如 "Snippet Manager"、"Code Snippets" 等。这些插件可以让你更方便地创建、编辑、搜索和共享代码片段。
还有一点，别忘了定期备份你的代码片段文件，以防丢失！
