vscode自定义vue模板快设置

文件 - 首选项 - 用户代码片段 - 输入vue - 选择vue.json

模板需要json格式。

copy模板：

{
	// Place your snippets for vue 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"
	// }
	"vue template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div id=\"app\">$0",
            "      mocar小师兄",
            "  </div>",
            "</template>\n",
            "<script type=\"text/javascript\">",
            "export default {",
            "  name: \"appName\",",    
            "  data() {",
            "    return {\n",
            "    }",
            "  },",
            "  components: {",
            "    HelloWorld",
            "  }",
            "}",
            "</script>\n",
            "<style  scoped>",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}

prefix： 表示生成对应预设代码的命令（我设置为vue，可以随意）

保存即可，新建vue模板完成。

src目录下新建文件 .vue文件，创建成功后，在内容区域，输入vue，选择刚刚创建的模板即可。

通用版：

{
	// Place your snippets for vue 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"
	// }
	"vue template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>$0",
            "      mocar小师兄",
            "  </div>",
            "</template>\n",
            "<script>",
            "export default {",
            "  name: \"newFileName\",",    
            "}",
            "</script>\n",
            "<style scoped>",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}