在vscode中添加代码片段
选择“新建全局代码片段文件，然后输入文件名（随便输入）
然后会生成文件，安装文件中的Example就可以添加代码片段
里面各个字段的含义：
"Print to console：代码片段的名称，不同代码片段需要不同，在快捷输入中可以看到
scope：表示这个代码片段使用的语言，多种用,分隔，如果不写表示全部适用
prefix：表示快捷输入的字符串，输入的内容出现提示
body：生成代码的主体，具体在后续讲解
description：描述
"Print to console": {
"scope": "javascript,typescript,vue",
"prefix": "temp",
"body": [
"<template>",
"",
"</template>",
"<script setup lang=\"ts\">",
"",
"</script>",
],
"description": "fast template"
}
在Vue文件中使用，输入temp
就能快速生成想要的代码
定义多个代码片段
在一个文件中可以定义多个代码片段，只要符合json格式，修改每个代码片段名称，并用,连接
body定义详解
多行定义方式
多行有两种写法：
一种需要每行用""，然后行之间用,连接（如示例）
"Print to vue": {
"scope": "javascript,typescript,vue",
"prefix": "temp",
"body": [
"<template>",
"",
"</template>",
"<script setup lang=\"ts\">",
"",
"</script>",
],
"description": "fast template"
}
另一种就是使用特殊符号\n进行分行（不推荐）
特殊内容
在 Visual Studio Code 的用户代码片段中，您可以通过在 body 部分添加特殊内容来实现更灵活的代码片段。特殊内容可以是以下之一：
- 占位符（Placeholder）：使用
$1、$2、$3等占位符来定义插入代码后光标的位置。例如：
{
"My Placeholder": {
"prefix": "plac",
"body": [
"console.log('$1');",
"$2"
],
"description": "My custom code snippet"
}
}
2.变量（Variable）：使用 ${variableName} 形式的变量来允许在代码插入时进行输入,多个变量通过tab切换进行修改。例如：
{
"My Variable": {
"prefix": "mvar",
"body": [
"const ${1:name} = ${2:value};",
"$3"
],
"description": "My custom code snippet:Variable"
}
}
3.循环（Tab stops）：使用 $0 定义最后一个 Tab stop，使得在插入代码后，光标会回到这个位置。例如：
{
"My Tab stops": {
"prefix": "myfor",
"body": [
"for (let ${1:i} = 0; $1 < ${2:array}.length; $1++) {",
"\tconst item = ${2:array}[$1];",
"\t$0",
"}"
],
"description": "My custom code snippet:for"
}
}
在保存用户代码片段文件后，使用触发关键字即可在编辑器中插入代码片段，并根据需要填充特殊内容。按下 Tab 键将在占位符和变量之间切换，方便您快速编辑代码片段。
预定义变量
VSCode 提供了一些预定义的变量，用于获取选定文本或行号等信息。
日期变量
最常见的就是日期变量：
$CURRENT_YEAR: 当前的年份，例如：2023。$CURRENT_MONTH: 当前的月份（两位数），例如：08。$CURRENT_DATE: 当前的日期（两位数），例如：01。$CURRENT_HOUR: 当前的小时（24 小时制，两位数），例如：12。$CURRENT_MINUTE: 当前的分钟（两位数），例如：34。$CURRENT_SECOND: 当前的秒数（两位数），例如：56。
这些变量用于在代码片段中插入当前的日期和时间，方便在代码注释或其他文本中包含时间戳等信息。
例如，上面提到的示例代码片段：
{
"My Time": {
"prefix": "mySnippet",
"body": [
"/* Current Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE */",
"/* Current Time: $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND */",
"$0"
],
"description": "My custom code snippet"
}
}
在使用这个代码片段时，$CURRENT_YEAR、$CURRENT_MONTH、$CURRENT_DATE、$CURRENT_HOUR、$CURRENT_MINUTE 和 $CURRENT_SECOND 会被实际的日期和时间值替换。
请注意，这些内置变量只在代码片段插入时动态地显示当前的日期和时间，而不会随着时间的推移而更新。
其他内置变量
除了日期和时间相关的内置变量，Visual Studio Code 还提供了一些其他有用的内置变量。以下是一些常用的内置变量及其用途：
$CLIPBOARD: 剪贴板中的内容。可以用于将剪贴板中的内容粘贴到代码片段中。$TM_SELECTED_TEXT: 当前选中的文本内容。可以用于将选中的文本插入到代码片段中。$TM_CURRENT_LINE: 当前所在行的内容。$TM_CURRENT_WORD: 当前光标所在位置的单词。$TM_FILENAME: 当前打开的文件的文件名（包含扩展名）。$TM_FILENAME_BASE: 当前打开的文件的文件名（不包含扩展名）。$TM_DIRECTORY: 当前打开的文件所在的目录路径。$TM_FILEPATH: 当前打开的文件的完整路径（包含文件名）。$TM_LINE_INDEX: 当前所在行的索引（从0开始计数）。$TM_LINE_NUMBER: 当前所在行的行号（从1开始计数）。$TM_LINE_START: 当前行的起始位置。$TM_LINE_END: 当前行的结束位置。
还有一些关于时间的内置变量及其说明：
整体示例
这些变量可以让您在代码片段中动态地插入与当前编辑环境相关的内容，例如当前文件名、当前行内容等。可以根据需要使用这些内置变量来定制自己的代码片段，以提高编码效率。
一下是一个示例使用了上面那些内置变量：
{
"Insert Info Comment": {
"prefix": "infoComment",
"body": [
"/*",
" * File: $TM_FILENAME",
" * Path: $TM_FILEPATH",
" * Directory: $TM_DIRECTORY",
" * Line: $TM_LINE_NUMBER",
" * Line Index: $TM_LINE_INDEX",
" * Current Word: $TM_CURRENT_WORD",
" * Selected Text: $TM_SELECTED_TEXT",
" * Clipboard Content: $CLIPBOARD",
" * Current Line: $TM_CURRENT_LINE",
" * Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
" * Time: $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
" */",
"$0"
],
"description": "Insert information comment"
}
}
效果：
