vscode 快速创建vue2!3模板

一、新建模板配置文件vue.json

有三个方法,用哪个都行：

1. 使用快捷Ctrl + Shift + P唤出控制台，然后输入snippets并选择,输入 vue.json ，然后 enter 回车；
2. 文件>首选项>用户代码片断里面，输入 vue.json ，然后 enter 回车；
3. file > Preferences > User Snippets，当弹出搜索框之后，输入 vue.json ，然后 enter 回车；

二、删除默认代码，替换代码

三、更改模板内容

将vue.json文件替换以下模板内容（复制当前代码粘贴上去（当前配置的是 vue2/3 模版，当然也可以自定义自己想要的模版））

{
  // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. 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:
  "vue-template3": {
    "prefix": "vue3",
    "body": [
      // "<!--",
      // "  *@author [前端_XXX]", // 作者名称
      // "  *@date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",//当前时间
      // "!-->",
      "<template>",
      "  <div>",
      "",
      "  </div>",
      "</template>",
      "<script setup lang=\"ts\">",
      "import { ref, reactive } from 'vue'",
      "",
      "</script>",
      "<style lang=\"scss\" scoped>",
      "",
      "</style>"
    ],
    "description": "vue-template3"
  },
  "vue-template2": {
    "prefix": "vue2",
    "body": [
      // "<!--",
      // "  *@author [前端_XXX]", // 作者名称
      // "  *@date $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",//当前时间
      // "!-->",
      "<template>",
      "  <div>",
      "",
      "  </div>",
      "</template>",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "",
      "    }",
      "  }",
      "}",
      "</script>",
      "<style lang=\"scss\" scoped>",
      "",
      "</style>"
    ],
    "description": "vue-template2"
  }
}

四、模板使用

新建一个 test.vue 文件，输入“<font style="color:rgb(79, 79, 79);background-color:rgb(238, 240, 244);">vue2 或 </font>[vue3](https://so.csdn.net/so/search?q=vue3&spm=1001.2101.3001.7020)”，按下回车键或者Tab键，模板就自动生成了。