vscode自定义快速生成vue3.0模板

在vue2中，我们都知道在vscode中安装Vetur后

只需要在代码编辑器输入v或者输入default按下回车就可以快速生成一个vue2的模板。

使用Vite工具创建了vue3.0，怎么在项目中快速生成vue3.0的模板？

• 找到vscode编辑器左方边侧栏的设置齿轮，点击进去。

• 选择用户代码片段

  
  

• 这时会弹出一个输入框，点击新建全局代码片段文件

  
  
• 给你的模板文件起一个名字，填写模板内容

{
    "Print to console": {
        "scope": "vue", //指定文件类型，只有.vue文件可以触发
        "prefix": "v3", //自定义触发指令，我这里设置输入v3按下回车即可快速生成模板
        "body": [ //定义模板内容
            "<script setup lang='ts'>",
            "",
            "</script>",
            "",
            "<template>",
            "    <div>",
            "",
            "    </div>",
            "</template>",
            "",
            "<style lang='less' scoped>",
            "",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

参数：

• scope 指定文件类型，我这里指定.vue文件
• prefix 自定义快捷指令触发生成模板

在.vue文件中输入v3，按需回车即可快速生成编写好的vue3.0的模板