vue变量自动补全失效的根本原因是vetur不支持vue 3的setup语法糖和lsp协议,必须改用官方volar插件,并配置tsconfig.json/jsconfig.json及emmet支持。

Vue 变量自动补全在 VSCode 里默认不工作,根本原因不是插件没装,而是语言服务没正确接管 .vue 文件的 <script></script> 块——尤其当项目用的是 Vue 3 + TypeScript + setup 语法糖时,Vetur 已失效,必须用 Volar。
为什么 Vetur 补全 Vue 变量会失效
Vetur 是为 Vue 2 设计的,对 Vue 3 的响应式 API(如 ref、computed)、defineProps 类型推导、以及 <script setup></script> 中的顶层绑定缺乏语义理解。它只能做字符串级提示,无法识别 const count = ref(0) 后 count.value 的类型,更不会补全 props.xxx 中 xxx 的具体字段。
- 现象:输入
this.或props.没有属性提示,或只显示泛泛的any - 根本问题:Vetur 不支持 LSP(Language Server Protocol),无法与 TypeScript 语言服务深度协同
- 兼容性:Vue 3.3+ 项目中,Vetur 会主动禁用自身脚本块的语言功能,避免冲突
必须安装 Volar 而不是 Vetur
Vue 官方维护的 Volar 是当前唯一能提供准确 Vue 变量补全的语言服务器。它通过 TypeScript Vue Plugin 注入类型信息,让 TS 语言服务“看懂”setup 里的声明和返回。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
phpenv搭建网站 vscode+xdebug+phpenv调试php代码
共1课时 | 423人学习
使用 Xdebug 精通 PHP 高级调试技巧【零基础到精通】
共3课时 | 487人学习
vscode手册
共0课时 | 0人学习
