程序员必备小知识：VSCode一键生成.vue文件

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在使用 Vsvode 的日常开发过程中，有时候我们需要创建一些个性化的，可能需要大量重复使用的模板，如API文件、组件基础文件等，再比如创建vue项目时，每次都要重复引入vue.js并且创建new Vue等，枯燥重复且无味，这个时候我们就可以通过 Vscode 提供的模板功能，先预定义一个个性化的自定义模板，然后通过某个快捷键触发，一键生成想要的文件内容。

例如：每次新建.vue文件，可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板，

（偷懒促进技术发展，促进社会进步。。。。能用模板一键生成，绝对不去多敲一行代码，哈哈哈。。。）

步骤如下

1. Ctrl + Shift + P打开控制台，输入snippets(首选项：配置用户代码片段）；

2. 接下来输入vue并选择，VSCode会自动生成一个vue.json的文件。这里就是我们要输入模板的地方了;

3. 根据原有注释掉的提示输入模板，具体格式如下（其中$0代表模板生成后，光标停留的位置）：

       "Print to console":{
   		"prefix": "vue",
   			"body": [
   				"<template>",
   				"  <div class="wrapper">$0</div>",
   				"</template>",
   				"",
   				"<script>",
   				"export default {",
   				"  props: {",
   				"  },",
   				"  data () {",
   				"    return {",
   				"    }",
   				"  },",
   				"  created () {},",
   				"  mounted () {},",
   				"  watch: {},",
   				"  computed: {},",
   				"  methods: {},",
   				"  components: {},",
   				"}",
   				"</script>",
   				"<style scoped>",
   				"</style>"
   			],
   			"description": "A vue file template"
   	    }
   

4. 保存，重新启动vscode，新建.vue文件，在文件中输入vue即可看到提示，tab键即可生成原定义模板内容

​