VScode创建Vue模板代码-自定义代码片段（详细步骤）

01-安装插件识别Vue文件

02-配置模板代码片段

1. 依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户代码片段)”， 此时，会弹出一个搜索框，输入vue， 如下：
   
2. 选择 vue 后，VS Code 会自动打开一个名字为vue.json的文件，复制以下内容到这个文件中

{        
	"vue-template": {            
		"prefix": "vuekj",            
		"body": [                
			"<template>",                
			"  <div>",                
			"",                
			" </div>",                
			"</template>",                
			"",                
			"<script>",                
			"export default {",                
			"  name: '',",                
			"  data() { ",                
			"    return {",                
			"",                
			"    }",                
			"  },",                
			"  props: {",                
			"",                
			"  },",                
			"  components:{",               
 			"  },",                
			"  mounted() {",               
			"",             
			"  },",        
			"  methods:{",       
			"",        
			"  },",       
			" }",        
			"</script>",      
			 "",       
			 "<style scoped>",                               
			"</style>"               
		],         
		"description": "my vue template"  
	}  
}

保存后关闭这个文件。
说明：$0 生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令

03-测试

新建一个名为Demo.vue的文件，输入vue，此时编辑区会有一系列提示，选择Log output to console这一项

04-这样就很方便啦！