vscode自定义vue模板代码段

打开vscode编辑器，点击按F1或者ctrl + shift + p打开Command palete
输入snippet

输入vue，如果列表中存在Vue，可直接点击打开vue.json设置文件，如果列表中不存在Vue，安装插件VueHelper还是Vetur插件，如果Vue已存在，打开vue.json

{
	// 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模板": {//代码段描述
		"prefix": "hello",//指令名称
		"body": [//模板
			"<template>",
			"  <div class=\"\"></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '',",
			"  components: {},",
			"  props: {},",
			"  data () {",
			"    return {}",
			"  },",
			"  computed: {},",
			"  watch: {},",
			"  created () {},",
			"  mounted () {},",
			"  methods: {}",
			"}",
			"</script>",
			"",
			"<style scoped lang=\"less\"></style>"
		],
		"description": ""
	}
}

可以使用snippet生成自己想要的长模板

测试：

会自动生成

光标移动，添加$1…

默认光标在$1，按下Tab会移动到$2的位置