（VS Code）Vetur 在单文件组件内 Intellisense 失效的问题

  • Z时代
  • 2024-01-10
  • 分类：IT

=== 解决方法请参考采纳的答案和后面的评论 ===

已经安装了 Vetur 插件，可以识别 .vue 单文件内部的结构，但不能使用 Vue 实例中绑定的属性和方法。

例如，在 .vue 文件的 methods 某个函数内输入 this 不能将 this 识别为 Vue 实例，从而提示 Vue 的相关方法和属性(例如 this.$router），但如果在 .vue 文件内引入 new Vue().$route 是可以的，也就是说问题不在于无法识别 Vue 实例，而是该单文件组件没有被认为是一个 Vue 实例。详情请参考下方图片。

根据试验，我发现官方给的 VeturPack 例子是正常的，但是通过 electron-vue 生成的项目就不正常，由于不清楚它的工作方式，因此没找出原因。

现在暂时的结论是，Vetur 应该使用某个入口/某种方法来查找项目文件，而在我的项目里它没有正确的搜索…被识别为一个孤立的 .vue 文件。所以得弄清楚它是怎么查找项目文件的。

如果有哪位大神有空的话，可以帮忙复制上面两个项目研究一下原因。

===== 旧的问题描述 =====

可以获取文件内的结构

无法获取 Vue 实例的属性

vue 查看了 dependency 是最新版的（> 2.5)，vs code 也是刚更新的。（2018-7-7）

找了一圈没有发现有插件实现我所说的这个功能，这样很不方便使用绑定到 Vue 组件的那些属性。

By the way，我是用 vue-cli 的 electron-vue 模版生成的项目。

目前最好的解决办法是发现了一个 vue-helper，可以便捷输入 Vue 内建的方法，然后输出成 this.xxx 的形式。这样我如果变量名是 self (=this) 就很不便，而且自己绑定上去的属性也没法识别。

JetBrains 系(Webstorm啥的) 是可以提示的，虽然感觉它好像是把所有同名的方法都列了出来，而不是找到了关联的 Vue 实例，但 whatever，至少给了我提示

回答：

这种效果？
ezgif-1-d8dec79e6a.gif

Vue2.5版本已经自带了。如果没有，说明版本太老。

墙内画质比较渣，原图请到Evan（Vue开发者）的博客原文里去找

官方文档：TypeScript 支持

补充一下，不一定要写TypeScript，只不过ts和js是共享语言服务的，VSC的js补全功能就是ts的那一套，因为js没有声明类型的语法，所以补全功能要用ts写，但ts写好的声明一样可以给js用。

如果什么都不做，确实是只能识别出单文件组件的结构。官方文档里是这样写的：

// 1. 确保在声明补充的类型之前导入 'vue'
import Vue from 'vue'
// 2. 定制一个文件，设置你想要补充的类型
//    在 types/vue.d.ts 里 Vue 有构造函数类型
declare module 'vue/types/vue' {
// 3. 声明为 Vue 补充的东西
  interface Vue {
    $myProperty: string
  }
}

然后保存为xxx.d.ts，整个项目内的.ts和.js就都会得到这个声明

clipboard.png

上图用的就是js，类型推断也是正确的。

再补充一下，既然是vue-cli的话，新建项目的cli选项里会有TS支持的选项，打开的话会自动生成一个模板.d.ts，可以参考着用。

还有就是，既然都用箭头函数了，还self = this干啥？

回答：

问题解决了，插件仅仅是根据 package.json 里 vue 的版本号决定是否开启这项功能的，而不是根据实际安装的 vue 的版本…
将 vue 版本号更改就解决了 (^2.3.3 -> ^2.5.3)
我最初在 package-lock.json 里看了版本是最新的，就认为没问题，但实际上它不管你实际安装的是什么，它只看 package.json...就算你实际安装的版本 > 2.5 而且里面定义了 types 它也是不管的。。。
具体细节请参考采纳的答案，里面提到了很多有用的信息。

以上是 （VS Code）Vetur 在单文件组件内 Intellisense 失效的问题 的全部内容， 来源链接： utcz.com/p/188923.html

回到顶部