volar未真正接管或类型链路中断导致补全失效:需启用takeovermode、卸载vetur、配置tsconfig.json含"types": ["vue"]、安装typescript vue plugin、重启volar服务并确保状态栏显示vue模式。

Vue 文件里补全失效、defineProps 不提示、v-model 参数名没下拉、点击跳转到 node_modules 而非源码——不是插件没装,是 Volar 没真正接管,或类型信息链路断在某个环节。
为什么 defineProps 和 ref 不自动补全 import
VSCode 的自动导入完全依赖 TypeScript 语言服务器(TS Server)的符号解析能力,而 TS Server 默认根本不读 .vue 文件。只有 Volar 启用 takeOverMode,并配合 TypeScript Vue Plugin (Volar),才能把 <script setup></script> 里的声明“透给” TS Server。
- 状态栏右下角必须显示
vue(不是HTML或Plain Text),点它手动选一次Configure File Association for '.vue'→vue - 必须卸载
Vetur及其所有衍生插件(如Vetur ESLint),残留一个都会抢控制权 - 项目根目录必须有
tsconfig.json(哪怕空内容),否则 Volar 不启动 TS 支持 -
settings.json中需启用:"typescript.suggest.autoImports": true和"javascript.suggest.autoImports": true - 若使用路径别名(如
@/composables),tsconfig.json的compilerOptions.paths必须正确定义,否则补全和跳转都会失败
v-model 参数名不提示、模板中 ref 类型显示为 any
这是 Volar 模板校验未生效的典型表现。Volar 的模板块(<template></template>)类型检查能力,强依赖 vueCompilerOptions 配置和 types 声明,不是光装插件就能开箱即用。
-
tsconfig.json中必须包含:"compilerOptions": { "types": ["vue"] } - 若项目含自定义组件或第三方 UI 库(如 Naive UI),需额外在
types中加入对应类型包,例如"naive-ui" - 确保已安装
TypeScript Vue Plugin (Volar)(注意:这是独立插件,不是 Volar 主体的一部分) - 按
Ctrl+Shift+P运行Volar: Restart Server,强制重载语言服务;重启后测试ref变量在模板中是否仍标红或显示any - 检查
settings.json是否误设了"volar.ignoreProjectName"过宽(如填了"src"),导致 Volar 跳过关键目录
保存后补全建议消失、输入 . 不弹出方法列表
这不是补全功能坏了,而是当前文件的语言模式或 LSP 状态被意外降级。常见于插件冲突、配置覆盖或缓存残留,尤其多见于从 Vue 2 项目迁移后。
- 打开任意
.vue文件,按Ctrl+Shift+P→Developer: Toggle Developer Tools,看 Console 是否报Cannot find module 'vue'或Failed to load language features - 执行
code --disable-extensions启动 VSCode,确认问题是否消失;若消失,说明是插件冲突,优先排查Prettier、ESLint、EditorConfig和旧版Python插件(它们常拖慢 LSP 初始化) - 删掉
%USERPROFILE%\.vscode\extensions\*下所有含vetur字样的文件夹(Windows)或~/Library/Application Support/Code/User/globalStorage/*vetur*(macOS),避免缓存干扰 -
editor.quickSuggestions必须在settings.json中显式开启:"editor.quickSuggestions": { "other": true, "strings": true };UI 设置面板改的可能只作用于当前工作区,无效 -
editor.suggestOnTriggerCharacters必须为true,否则.、:不触发建议
最易被忽略的是:Volar 的 takeOverMode 开启后,VSCode 内置的 TypeScript 支持就退场了——此时所有类型推导、跳转、补全都由 Volar 全权负责。任何残留的 Vetur 配置、错误的 tsconfig.json 路径、或缺失的 types 声明,都会让这条链路在某一处彻底断开,且不会报错,只会静默失效。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











