Visual Studio Code 添加设置代码段

Visual Studio Code 添加设置代码段(snippet)

最近在写vue商城项目的时候，发现老师自己在VScode添加了一些的代码块非常方便，本打算多码多练的我，在抵制不住诱惑设置后发现。。。真香！

---

前言

需求：给表单添加验证规则，因为是必填项，没填的话在失去焦点的时候要进行错误提示。有很强的重复性，故设置快捷代码块。

---

      addFormRules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' } //使这段变成插入代码块
        ]

1、首先可以打开一个vue或者js的文件(或在当前打开文件中)按快捷键Ctrl+Shift+P打开命令输入 snippet :

2、选择你需要给哪种语言创建代码块，这里是在vue文件，在script脚本中创建，所以选择js。
接下来会打开一个JSON格式的配置文件，我们来看一下example:

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

参数解释：

prefix :这个参数是使用代码段的快捷入口，比如例子中的log在使用时输入log会有智能感知。
body :这个是代码段的主体。需要设置的代码放在这里，字符串间换行的话使用\r\n换行符隔开。如果值里包含特殊字符注意需要进行转义。
$1 :智能生成后为光标的所在位置。
$2 :这个参数后会光标的下一位置将会另起一行，按tab键可进行快速切换,还可以有$3,$4,$5…
description :在使用智能感知时代码段的描述。

3.接下来我们设置依葫芦画瓢，设置自己所需的表单校验规则代码块：

	"Console required in form": {
		"prefix": "reqiuredfield",
		"body": [
			"{ required: true, message: '$1', trigger: 'blur' }"
		],
		"description": "Add validation rules to the form"
	}

Ctrl+S保存后在vue文件中输入requiredfied按下tab就可以看到效果了。大致输入req就能弹出智能提示：


之后补充用户没填表单后的提示信息就好啦。