Vue 3 项目必须禁用 Vetur、启用 Volar,因 Vetur 已停更且不支持 script setup 类型流,混用会导致 ref 类型为 any、defineProps 报错、模板跳转失效;需彻底卸载 Vetur、安装 Volar 及 TypeScript Vue Plugin,并配置 tsconfig.json 的 "types": ["vue"] 和 volar.experimental.templateInterpolationService。

Vue 3 项目里装了 Vetur 就会类型推导失效
不是配置没调好,是 Vetur 根本不支持 Vue 3 的 script setup 类型流。它把 ref 当成 any、defineProps 报 Cannot find name 'defineProps'、模板里点不进响应式变量——这些全是必然结果,不是“再配配就能好”。
常见现象包括:
-
ref(0)的.value没补全,hover 看类型是any -
defineProps({ count: Number })后,模板中{{ count.toFixed }}被标红 - 右下角语言模式显示 “Vetur” 或 “HTML”,而不是 “Vue”
彻底禁用 Vetur 是唯一解法
Volar 和 Vetur 都抢着处理 .vue 文件,但底层服务互不兼容:Vetur 基于 Vue 2 架构模拟支持,Volar 基于官方 @vue/language-service 实现真实类型检查。共存时 Vetur 常占上风,直接压垮 Volar 的解析能力。
操作必须一步到位:
立即学习“前端免费学习笔记(深入)”;
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 打开 VSCode 扩展面板(
Ctrl+Shift+X),搜Vetur,对所有相关扩展(含Vetur Pack)点击「禁用工作区」或「卸载」 - 检查
settings.json(用户设置 + 工作区设置),删掉所有vetur.*配置项,比如"vetur.validation.template": true - 重启 VSCode —— 热重载不生效,必须完全重启
Volar 必须配 TypeScript Vue Plugin
Volar 本身只管 <template> 区域的类型推导;<script setup lang="ts"> 里的 TS 类型检查,靠的是另一个插件:TypeScript Vue Plugin (Volar)。漏装它,onMounted 参数无提示、const x = ref(0) 的 x.value 不补全,都是常态。
确认已装且生效:
- 安装
Vue Language Features (Volar)和TypeScript Vue Plugin (Volar)两个扩展(后者常被忽略) - 右下角点击 TS 版本标识 → 选「Use Workspace Version」,确保指向项目本地
typescript - 若用
pnpm,检查node_modules/.pnpm下有typescript和@vue/runtime-core,否则插件回退到基础检查模式
关键配置项不能少
即使插件装对了,缺几个配置项,defineProps 还是飘红、模板内表达式没提示。
必须检查:
-
tsconfig.json中"compilerOptions.types"包含"vue",否则ref返回值类型丢失 -
.vscode/settings.json加上"volar.experimental.templateInterpolationService": true,否则{{ count + 1 }}里不识别count类型 - 打开任意
.vue文件,右下角手动点语言模式 → 选「Vue」(不是「Vue HTML」或「Vue (Vetur)」) - 项目根目录有
tsconfig.json或jsconfig.json,且"compilerOptions.allowJs"设为true(JS 项目也需要)
script setup 的完整上下文,而这个上下文极易被残留的 Vetur 配置、错误的语言模式或缺失的 types 声明打断。问题往往不出在“没装对”,而出在“没清干净”和“少配了一行”。

















