需手动配置vue.json代码片段：打开命令面板→configure user snippets→选择vue→添加含import definecomponent及ts类型声明的json模板，prefix设为唯一值如vs，并确保文件语言模式为vue。
如何配置 Vue3 + TS + setup 的用户代码片段
VSCode 本身不自带 Vue3 Composition API 的完整模板，必须手动配置 vue.json 片段文件才能一键生成带 setup、defineComponent 和类型声明的结构。
操作路径是：按 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（Mac），输入 Configure User Snippets → 选择 vue → 打开 vue.json。
- 如果没看到
vue选项，说明还没创建过该语言片段，选New Snippets file…并命名为vue - 不要覆盖已有插件（如 Vue Official）的默认片段，而是新增一个专属
prefix，比如vue3ts或vs -
body中需显式写入import { defineComponent } from 'vue'，否则 TS 类型推导会失效 - 使用
${TM_FILENAME_BASE}替代硬编码组件名，避免每次手动改名
示例片段：
{
"Vue3 + TS + setup": {
"prefix": "vs",
"body": [
"import { defineComponent } from 'vue';",
"",
"export default defineComponent({",
" name: '${TM_FILENAME_BASE}',",
" setup() {",
" return {};",
" }",
"});"
],
"description": "Vue3 Composition API + TS template"
}
}
prefix 冲突时怎么判断谁生效
多个插件或自定义片段共用同一个 prefix（比如都用 vue），VSCode 默认优先启用插件提供的片段，而非用户配置 —— 这是容易被忽略的优先级规则。
验证方式很简单：在 .vue 文件中输入 vue 后暂停，看自动补全列表里显示的是哪条提示，鼠标悬停能看到来源（如 “Vue Official” 或 “user snippet”）。
- 若想强制用自己写的，把
prefix改成唯一值，比如v3s、tsv - 插件片段通常不支持 TS 类型参数或
defineProps模板，而用户片段可以自由扩展 - 全局片段（
global snippets）对所有语言生效，但 Vue 文件中不会触发，除非你在vue.json里明确定义
为什么 setup 模板里写 defineProps 会报错
直接在 body 里写 const props = defineProps(); 是无效的 —— VSCode 片段只是纯文本插入，不执行 TS 类型检查，也不识别泛型语法中的尖括号，会导致插入后立即出现语法高亮异常或 ESLint 报错。
- 正确做法是用占位符包裹类型部分：
const props = defineProps();，让光标停在花括号内供手动填写 - 避免在
body中写多行泛型定义，TS 编译器无法在片段阶段解析<t extends ...></t> - 如果项目用了
defineProps运行时声明（非泛型），可安全写成defineProps(['msg'])，无兼容问题
保存后没反应？检查这三项设置
片段配置保存后仍不触发，大概率不是语法错误，而是编辑器行为被抑制了。
-
"editor.snippetSuggestions": "top"必须开启，否则片段建议可能被其他补全项淹没 -
"editor.suggest.showSnippets": true（默认为true，但某些插件会覆盖它） - 确认当前文件语言模式是
vue：右下角状态栏应显示 “Vue” 而非 “Plain Text” 或 “HTML”，否则vue.json不加载
最隐蔽的问题是：你正在编辑的文件后缀是 .vue，但 VSCode 没识别为 Vue 语言 —— 此时需点击状态栏语言标签，手动选择 “Vue”。
