vscode生成vue2+vue3自定义模板方法

vscode配置vue模板方式

1. 设置——用户代码片段
2. 创建代码片段文件——输入文件名
   
3. vue3模板代码

{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
	  "",
      "<script setup lang='ts'>",
      "import { ref, reactive } from 'vue'",
      "",
      "</script>",
      "",
      "",
      "<style lang='scss' scoped>",
      "",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

4. vue2模板代码

{
  "Print to console": {
    "prefix": "vue2",
    "body": [
      "<template>",
      "    <div>\n",
      "    </div>",
      "</template>",
      "<script>",
      "export default {",
      "   name:'',",
      "   data() {",
      "      return {",
      "      }",
      "   },",
      "   methods:{",
      "   },",
      "}",
      "</script>",
      "<style lang=\"scss\" scoped>\n",
      "</style>",
      "$2"
    ],
    "description": "Log output to console"
  }
}

5. 效果如下，输入文件名回车即可快捷使用自定义模板