vscode自定义快捷键生成代码块（详）

以setTimeout为例

1. ctrl+shift+p，调出命令板
2. 输入 snippet
3. 选择
   1. 首选项：配置用户代码片段-新建全局代码块片段
   2. 输入一个你给代码段取的名字，比如sto2（因为系统已经有一个sto了）
4. 配置代码片段
   从里面的例子copy一份下来自己修改成自己要的格式即可。

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"setTimeout": {
		"scope": "javascript,typescript",  // 运行环境
		"prefix": "sto2", // 快捷键名
		"body": [
			"setTimeout(() => {\n\t$2\n}, ${1:0})",
			"$0"
			// ${1: 占位符} 光标位置先到$1，按tab切换到光标位置$2
			// 占位符相当于默认值输入就替换，不输入可以tab切到$2位置。
			// $0写完$2后换行跳到外面
		],
		"description": "setTimeout"
	}
}

5. 输入sto2回车生成如下代码：

setTimeout(() => {
   // $2光标在这个位置
}, 0) // $1在0的位置
// $0的位置

tab顺序：$1->$2-$0
这样我们就可以方便快速的输入vue更新dom的代码片段。

---

总结：我们可以将常用的代码块进行封装，提供工作效率。