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 Composition Analyzer
下载
分析 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></template> 区域的类型推导；<script setup lang="ts"></script> 里的 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 声明打断。问题往往不出在“没装对”，而出在“没清干净”和“少配了一行”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
