VS Code 自动生成vue文件模板

前言

在我们使用VS Code进行vue开发时，总会创建很多vue文件，每次创建文件时都需要手动写 template、script、style等。会显得很麻烦，并且增加了我们的代码量。

VS Code提供了一种解决方式，非常方便！

第一步：打开用户片段

依次选择文件–首选项–用户片段。

第二步：选择新建全局代码片段文件

第三步：输入vue，并回车

得到这样一个文件。

第四步：复制代码进行替换

代码如下：

{
    
    
	// 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"
	// }
	"Init vue": {
    
    
		"scope": "vue",
		"prefix": "vue",
		"body": [
			"<template>",
			"\t<div class=''></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"\tname: '',",
			"\tdata() {",
			"\t\treturn {",
			"\t\t}",
			"\t},",
			"\twatch:{",
			"\t},",
			"\tcreated() {",
			"\t},",
			"\tmethods:{",
			"\t},",
			"}",
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>"
		],
		"description": "vue template"
	}
}

可以根据个人具体要求，修改模板。

第五步：使用模板，查看效果

新建test.vue文件，输入vue，弹出提示，选择模板。

查看效果：

---------------------------这是一条华丽的分割线---------------------------

如果文章对您有用，不妨点个赞呗。