📝 方法一：官方插件——效率首选

这是最省心、最高效的方式，适合绝大多数开发者。

• 安装插件：在 VSCode 扩展商店 (Ctrl+Shift+X) 搜索 Vue VSCode Snippets，选择由 sdras 提供的版本并安装。

• 使用方法：安装后，在 Vue 文件中输入对应的前缀 (Prefix) 并按下 Tab 键即可快速生成代码。下表整理了最常用的一些片段：

💡 高级技巧：插件还支持动态生成。例如，输入 vfor 并按 Tab，你可以直接在生成的代码片段中选择要循环的数据源和生成的代码样式，非常灵活。

⚙️ 方法二：用户代码片段——按需定制

如果你需要高度定制化的模板（比如公司统一的代码风格），可以自己动手配置。

1. 创建配置文件：

   • 打开命令面板 (Ctrl+Shift+P)。

   • 输入 Preferences: Configure User Snippets 并选择。

   • 选择 New Global Snippets file，并命名为 vue.json 或其他你喜欢的名称。

2. 编写代码片段：打开 vue.json，你可以参考以下我为你整理的几种常用模板来编写自己的代码片段。

模板一：Vue 3 <script setup> + TypeScript（最常用）

将这段代码粘贴到 vue.json 中。

json

{
  "Vue3 Component": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div>\$1</div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "// $2",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>"
    ],
    "description": "Vue3 Composition API Component"
  }
}

注意：$1、$2 是制表位，生成代码后可以按 Tab 键快速在这些位置间跳转并修改内容。

模板二：Vue 3 <script setup> 基础版

这个版本不包含TypeScript，适合纯JavaScript项目。

json

{
    "Vue3 组件模板": {
        "prefix": "v3",
        "body": [
            "<template>",
            "  <div>\$1</div>",
            "</template>",
            "",
            "<script setup>",
            "import { } from 'vue'",
            "",
            "</script>",
            "",
            "<style scoped>",
            "",
            "</style>"
        ],
        "description": "快速生成 Vue3 组件模板"
    }
}

模板三：Vue 2 Options API

如果你仍在使用Vue 2，这个模板会更合适。

json

{
    "Vue2 组件模板": {
        "prefix": "vue2",
        "body": [
            "<template>",
            "  <div>\$1</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  name: '${1:ComponentName}',",
            "  data() {",
            "    return {",
            "      // data",
            "    }",
            "  },",
            "  methods: {",
            "    // methods",
            "  }",
            "}",
            "</script>",
            "",
            "<style scoped>",
            "",
            "</style>"
        ],
        "description": "快速生成 Vue2 组件模板"
    }
}

🚀 方法三：Emmet——快速编写模板

VSCode 内置了强大的 Emmet 工具，让你无需插件就能在 Vue 模板中快速编写 HTML 结构。只需在 .vue 文件的 <template> 标签内输入缩写并按 Tab 键即可。例如：

• div.container → <div class="container"></div>

• ul>li.item*3 → 生成一个包含三个 li 的 ul 列表。

注意：有时 Emmet 可能默认不对 .vue 文件生效，你可以通过修改 VSCode 的 settings.json 文件来解决：

json

"emmet.includeLanguages": {
  "vue-html": "html"
}

💡 新手避坑指南：常见问题与最佳实践

• 插件冲突：如果你同时安装了 Vetur 和 Volar（Vue 3官方推荐），必须禁用 Vetur，否则代码提示会失效。

• 插件失效：确保安装了 Vue VSCode Snippets 插件，并且 VSCode 的语言模式被正确识别为 Vue。

• <script setup> 中不要写 export default：使用 <script setup> 语法糖时，不要再写 export default { ... }，这会导致 Vue 无法正确识别组件。

• 团队协作：如果你们团队有统一的代码风格，建议使用“用户代码片段”方法，并将配置文件导出，与团队成员共享