vscode创建代码片段——以vue3.x模板为例

在vue中，需要创建vue文件时，我们通常需要自己手动输入如下模板

虽然花不了很多时间，但仍会比较繁琐，所以考虑创建一个快捷模板，可以快速生成vue模板
操作步骤如下：
打开vscode，文件 — 首选项 — 配置用户代码片段 — 新建全局代码片段文件 — 对代码片段命名 — 修改snippets内容

其中 prefix 为代码片段快捷指令，body内容为默认的代码片段
我修改后的模板代码为

"Print to console": {
		"prefix": "vue3",
		"body": [
			"",
			"",
			"",
			"",
			"",
			"",
		],
		"description": "Log output to console"
	}

此时，新建vue文件，输入vue3 即可出现如下提示

回车即可快速生成vue文件模板。

其他模板也可用同样的方法生成

补充：
如果生成类似console.log()这样的模板，我们通常希望模板生成后光标默认在括号内，可以在代码片段中加入 $0, 如下

"Print to console": {
		"prefix": "clog",
		"body": [
			"console.log('$0');",
		],
		"description": "Log output to console"
	}

这样生成代码片段时，光标会默认出现在括号内