时间戳

首页 > 技术文章 > VSCode基础使用之 User Snippets（用户代码片段）

VSCode基础使用之 User Snippets（用户代码片段）

jiaoshou 2020-08-01 19:17 原文

VSCode基础使用之 User Snippets（用户代码片段）

vscode的 User Snippets（用户代码片段）这个功能是做什么用的呢？简单的说就是代码提示功能，不管你写什么代码，在编辑器肯定有提示功能，但是肯定会碰到一些代码是没有提示的，但是你又经常手敲or复制粘贴，这时候vscode的User Snippets（用户代码片段）就可以帮你解决这个问题了。

具体功能

快速编写代码，提升开发效率

关键词 + Tab 键 => 一堆代码

编写User Snippets（用户代码片段）流程

新增User Snippets（用户代码片段）

我这里的编辑器汉化了，英文版是 User Snippets

选择User Snippets（用户代码片段）提示环境

在这里你可以搜索并选择你要在什么环境下提示自定义的代码片段，下面我以JavaScript语言为例，所以我就选JavaScript。

这是默认的文件提示，你可以简单看看，如果你英语和我一样需要借助在线翻译的话，我已经在下面帮你提前翻译好了。

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

在线翻译：

	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
    // 将你的javascript代码片段放在这里。每个代码段在代码段名称下定义，并具有前缀和正文

	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // 描述。前缀用于触发代码段，并将展开和插入代码体。可能的变量:

	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // $1， $2表示制表位，$0表示光标最后的位置，${1:label}， ${2:another}表示占位符。占位符的

编写User Snippets（用户代码片段）

单行代码片段
一个函数如果没有返回值的话，我们经常会写一行return false;，虽然代码不多，但是经常写也很麻烦，我们就用代码片段来简化一下。

例子写完是这样的：

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"return false": {
		"prefix": "rf",
		"body": [
			"return false;",
		],
		"description": "函数无返回值时使用"
	}
}

保存上面代码文件之后，在js文件里输入rf，就会看到代码提示了。

注：
1.如果description不写，默认会显示key键的内容
2.body 是一个数组,数组的每一项就是一行代码，所以如果你的代码是多行的话，就写成一个数组形式，如果项里还有双引号，需要在双引号前用\进行转义

多行代码片段

曾经jQuery盛行时候，我们写js都会先写个闭包，然后再写代码，防止冲突，那样反复写也是非常麻烦的，下面我们就演示一下多行代码片段怎么写。

例子写完是这样的：

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"return false": {
		"prefix": "rf",
		"body": [
			"return false;",
		],
		"description": "函数无返回值时使用"
	},
	"main function": {
		"prefix": "mf",
		"body": [
			"(function(){",
			"\t$0",
			"})();",
		],
		"description": "jq主函数"
	},

}

注： 你发现多行代码片段的body，第二项是一个\t$0，\t是制表符代码缩进，$0是光标位置，你可以添加多个如$0、$1、$2、$3...代码生成后每次按Tab键 光标就会依次移动到代码片段的相应位置

根据代码片段生成结果大概是这样的

带变量提示的代码片段

语法：${变量:提示内容}

假如你一个函数调用的代码，调用的时候需要传入的第一个参数可以是 String、Number、Boolean三种类型，你就可以在定义代码片段的时候给写一个提示，防止传入错误变量

例子写完是这样的：

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"return false": {
		"prefix": "rf",
		"body": [
			"return false;",
		],
		"description": "函数无返回值时使用"
	},
	"main function": {
		"prefix": "mf",
		"body": [
			"(function(){",
			"\t$0",
			"})();",
		],
		"description": "jq主函数"
	},
	"toDo function": {
		"prefix": "td",
		"body": [
			"toDo(${1: 可以传入 String、Number、Boolean}, $2)",
		],
		"description": "toDo函数调用"
	},

}

注:这是在第一个变量位置加了文字提示，所以需要用花括变量包上

根据代码片段生成结果大概是这样的,由于定义了两个变量，所以你可以按Tab键 进行光标跳转

带可枚举提示的代码片段

语法：${变量|枚举项|}，多个枚举项用英文格式的逗号分隔开

例子写完是这样的：

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"return false": {
		"prefix": "rf",
		"body": [
			"return false;",
		],
		"description": "函数无返回值时使用"
	},
	"main function": {
		"prefix": "mf",
		"body": [
			"(function(){",
			"\t$0",
			"})();",
		],
		"description": "jq主函数"
	},
	"toDo function2": {
		"prefix": "td2",
		"body": [
			"toDo(${1|String,Number,Boolean|}, $2)",
		],
		"description": "toDo函数调用2"
	},

}

根据代码片段生成结果大概是这样的,在可枚举变量位置就会显示预设的枚举项了

带特殊变量的代码片段

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"return false": {
		"prefix": "rf",
		"body": [
			"return false;",
		],
		"description": "函数无返回值时使用"
	},
	"main function": {
		"prefix": "mf",
		"body": [
			"(function(){",
			"\t$0",
			"})();",
		],
		"description": "jq主函数"
	},
	"toDo function2": {
		"prefix": "td2",
		"body": [
			"toDo(${1|String,Number,Boolean|}, $2)",
		],
		"description": "toDo函数调用2"
	},
	"header comment": {
		"prefix": "hc",
		"body": [
			"$BLOCK_COMMENT_START",
			" * Author: JiaoShou",
			" * Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
			"$BLOCK_COMMENT_END",
		],
		"description": "自定义注释模板"
	},

}

根据代码片段生成结果大概是这样的

更多特殊变量请访问vscode官方地址：https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

在线User Snippets（用户代码片段）转义工具

上面几个例子都是只有几行代码就缩进、转义问题相对较少，手动就可以修改了，如果我们需要写一个多行的代码片段，就可以使用下面这个在线工具进行转义。

网站：https://snippet-generator.app/

GitHub：https://github.com/pawelgrzybek/snippet-generator

如果网站不能访问，可以把GitHub下载到本地运行。

推荐阅读