VScode新建自定义模板快捷方式

VS新建vue文件的自定义模板

在使用vscode开发的时候，新建vue文件是不可或缺的，但是VSCode并没有vue文件的初始化模板，这个需要自定义模板。
我们可以使用vscode的snippets在新建.vue 文件后轻松获得一套模板。

具体步骤

• 打开VSCode -> “文件（mac机选Code）” -> “首选项” -> "用户代码片段”，然后会打开一个弹框。
• 在弹框中选择"新建代码片段"新建一个全局代码片段文件，自定义名称保存后，VS编辑器就会打开这个文件。
  
• 然后复制以下内容覆盖文件内容。

{
   // 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"
   // }
   	"Create vue template": {
   	"prefix": "vue",
   	"body": [
   		"<template>",
   		"  <div></div>",
   		"</template>",
   		"<script>",
   		"export default {",
   		"  name: \"${1:component_name}\",",
   		"  data () {",
   		"   return {}",
   		"  },",
   		"   methods:{}",
   		"}",
   		"</script>",
   		"<style lang=\"${2:scss}\" scoped>",
   		"</style>"
   	],
   	"description": "Create vue template"
   }
}

prefix 表示对应生成代码块的命令（我设置的是vue）
然后将文件保存关闭。

• 然后新建一个.vue文件
  在新建的.vue的文件中输入vue，回车，然后就会生成初始化代码块。
  
• 生成初始化模板如图：
  具体参数可以根据实际修改，此处我是用的是scss预处理语言
  

注意：

步骤二还有一个方法（方法二： 在弹框中搜索vue，选中vue.json，在vue.json中编辑自定义模板）

• 新建全局代码片段的好处就是，在非vue文件中输入vue命令都能新建出vue初始化代码模板。
• 如果是vue.json文件中定义初始化代码模板的话，就只能在.vue文件中vue命令才会有效。