vscode新增vue3 setup代码片段

### 创建 Vue 3 Setup 语法的代码片段

为了在 Visual Studio Code (VSCode) 中创建支持 Vue 3 `setup` 语法的代码片段，可以按照如下方式配置：

#### 定义用户代码片段
通过编辑器内置功能来添加新的用户代码片段。具体操作是在 VSCode 的菜单栏中依次点击文件 -> 首选项 -> 用户代码片段 -> 新建全局代码片段文件 或者特定于项目的代码片段文件。

对于 Vue 3 使用场景下的 `setup` 函数模板，可参照以下 JSON 格式的定义[^1]：

{
    "Create Vue 3 Component with Setup": {
        "prefix": "vue3setup",
        "body": [
            "<template>",
            "\t<!-- Your template here -->",
            "</template>",
            "",
            "<script lang=\"ts\">",
            "import { defineComponent, ref, reactive } from 'vue';",
            "export default defineComponent({",
            "\tname: '${TM_FILENAME_BASE}',",
            "\tprops: {},",
            "\temits: [],",
            "\tsetup(props, context) {",
            "\t\t// Reactive state",
            "\t\tconst count = ref(0);",
            "\t\treturn {",
            "\t\t\tcount",
            "\t\t};",
            "\t}",
            "});",
            "</script>",
            "",
            "<style scoped>",
            "\t/* Add your styles here */",
            "</style>"
        ],
        "description": "A snippet to create a new Vue 3 component using the Composition API's setup function."
    }
}

这段代码提供了一个完整的 Vue 组件结构，其中包含了 `<template>`、`<script>` 和 `<style>` 部分，并且特别强调了如何利用 TypeScript 来编写带有 `ref()` 及其他组合式API特性的逻辑部分[^2]。

当输入前缀 `vue3setup` 并按下 Tab 键或 Enter 键时，上述模板将会被自动填充到当前文档中，从而大大提高了开发效率并减少了重复劳动。