快速生成vue3语法糖

第一步 vscode找到左下角此处

第二步。点击配置用户代码片段

第三步 点击顶部第一条vue.json.code-snippets(全局)

第四步

1. 如果你想要Vue3 +ts(不想要ts语法，则把lang=’ts’删除)+ setup语法糖形式，复制以下代码

"prefix": "vue3",
    "body": [
      "<script lang='ts' setup>",
      "",
      "</script>",
      "<template>",
      "  <div>",
      "",
      "</div>",
      "</template>",
      "",
      "<style scoped lang='less'>",
      "",
      "</style>"
    ],
    "description": "Vue3 ts setup模板"
  }

图片是

2. 如果你想要与Vue2形式一样的Vue3代码ts(不想要ts语法，则把lang=’ts’删除)，复制以下代码

"Print to console": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script lang=’ts’>",
      "export default {",
      "  name: '',",
      "  setup() {",
      "    return {",
      "    }",
      "  },",
      "}",
      "",
      "</script>",
      "<style scoped lang='less'>",
      "</style>",
      
  ],
    "description": "Vue3 ts setup模板"
  }
}

检验如下，在vue文件中，写入 vue3或者（vue）

按下Tab键或者Enter键，就会出现如下模板