vscode原生不支持vue3组件模板生成，必须手动配置用户代码片段（vue.json）并搭配启用volar的takeovermode模式，否则vue3-setup等前缀无法触发；语言模式须设为vue，且需禁用vetur避免冲突。
直接说结论：VSCode 原生支持 Vue3 组件模板生成，不需要装“Vue Snippets”类插件，但必须配对 Volar + 手动配置用户代码片段（vue.json），否则输入 vue3-setup 之类前缀根本不会触发。
为什么 vh 或 vue 前缀不生效
常见错误是把片段文件命名为 vue.json，但没确认当前文件的语言模式是 vue（右下角显示“Plain Text”或“JavaScript”就无效）。VS Code 只在语言模式为 vue 的文件中激活对应片段，且只在 <script setup></script> 标签内部或空文件顶部才响应前缀匹配。
- 新建
.vue文件后，右下角点击语言模式 → 选 “Vue”，不是 “HTML” 或 “TypeScript” -
vh片段本质是 HTML 模板，和 Vue3 SFC 无关；它生成的是带<script src="vue@2"></script>的旧式页面，不能用于现代 Vue3 项目 - 若已安装
Vetur，必须禁用它，否则会干扰Volar的语言服务，导致片段插入后无类型提示、defineProps泛型失效
怎么配一个真正能用的 vue3-setup 片段
片段内容必须包含 lang="ts"、defineProps 和 defineEmits 的泛型写法，并预留光标位置。否则即使触发了，也要手动补 import、删 any、修类型——反而更慢。
- 路径：打开命令面板
Ctrl+Shift+P→ 输入Configure User Snippets→ 选New Global Snippets File→ 命名为vue.json - 内容粘贴进
{}内，注意 JSON 语法合法（不能有末尾逗号、注释） - 关键字段：
"prefix": "vue3-setup"，"scope": "vue"（显式限定作用域，避免误触） -
"body"中用$1、$2标记光标初始位置，例如const count = ref($1)，按 Tab 可跳转
{
"Vue3 Script Setup": {
"prefix": "vue3-setup",
"scope": "vue",
"body": [
"<script setup lang='\"ts\"'>",
"import { ref, reactive, onMounted } from 'vue'",
"",
"const props = defineProps<{",
" msg?: string",
"}>()",
"",
"const emit = defineEmits<{",
" (e: 'update:modelValue', value: string): void",
"}>()",
"",
"const count = ref($1)",
"const state = reactive({",
" name: '$2'",
"})",
"",
"onMounted(() => {",
" console.log('mounted')",
"})",
"</script>",
"",
"<template>",
" <div>{{ msg }}</div>",
"</template>",
"",
"<style scoped>",
"</style>"
],
"description": "Vue3 script setup template with TS and common APIs"
}
}
Volar 的 takeOverMode 必须开，且只开一次
这是最常被忽略的一步。不开 takeOverMode，VS Code 会继续用内置 TypeScript 服务处理 .vue 文件，导致 defineProps<t></t> 被当作文本、props.xxx 无补全、悬停看不到类型——此时哪怕片段生成了，也等于白搭。
- 打开设置
Ctrl+,→ 搜索volar.takeOverMode→ 勾选 - 同时手动关闭 Vetur：
"vetur.validation.template": false - 必须重启整个 VS Code 窗口（不是重载窗口），否则缓存未清，语言服务不切换
- 验证方式：在
.vue文件里写props.，应立刻出现msg补全项；悬停props应显示DefineComponentProps
复杂点在于：片段不负责推导类型，defineProps 的泛型必须你手写；Volar 不会根据 <template></template> 里的 v-model 自动反推接口。别指望“智能生成”，能少敲 ref() 和 onMounted 就已是效率上限。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
