Intellisense type inference stop working after git clone

[marco-quintella]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Tested on Mac and Linux
• Vetur version: 0.16.2
• VS Code version: 1.31.1

Problem

The type inference work well when creating a new project. But after I commit and push, and later clone the type inference between the parts of the component stop working and set everything to any.

Both shots were taken at same time.

Reproducible Case

Create a new project with vue cli create command.
Create a simple component or use the Helloworld one to check that the type inference is working.
Init a repo commit and push to github
Delete it from the computer
Clone the repo
Check that the type inference that was working before it's not working anymore.

[octref]

I cannot reproduce this. Can you push the code to a github repo so I can look into it?

[marco-quintella]

I just added you to my private project repo so you can have a look, there is not so much sensible work done anyway.

https://github.com/mqdev/gestor-cursos/invitations

Basically, if I create a new vue project from zero and simply copy all the files, it works. As soon as I make a PR and merge two branches, and so I need to check out the other branch the problem begins.

The this is capable to show all the $ but the that from the component.

[octref]

Thanks for letting me take a look.

I tried both src/App.vue and src/components/color-circle/index.vue, and both works fine for me:

Which file is causing trouble for you?

[marco-quintella]

Actually all of them...

I'm making a test, I was using a Windows 10 on the last screens.
I have a Mac, I gonna try with it after I finish installing the VSCode, and check if it continues.

[marco-quintella]

Just tested on a fresh mac install. The same happened with the same App.vue file.

[octref]

Hmm...

Do you have other Vue plugins installed? Can you try disabling all extensions except Vetur?

[marco-quintella]

Sorry for the late answer... I was traveling for a course and did not have time to look at this.
On the tests, I was using only the Vetur extensions.

I'm working on the branch 'alunos' and the same happens in the entire project. If I create a new project everything works fine.

I did an experiment:

• Created a new project with vue cli.
• Intellisense working fine.
• Imported my files to the project with git.
• Intelisense working fine.
• If I check out in another branch it begins the problem
• Even if I go back to the branch that was working before the intellisense doesn't work anymore

[marco-quintella]

Again, I just checked the App.vue file in this repo. It's working ok.

Now, you can try this:

• Checkout in the branch 'alunos'
• Open the file components/alunos/tabela-alunos.vue

This one and the others are not working... It doesn't show any type of intellisense or autocompletes

[octref]

Try adding a src/vue-types.d.ts file like so:

import Vue from 'vue'

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    firebase?: {}
  }
}

See https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins for official doc. Although you are not using TS directly, Vetur still depends on the types exported from Vue to work properly. Custom options are not handled gracefully yet, so you need to write these types for apollo/firebase/etc that add custom options to Vue.extend.

[marco-quintella]

Well, I did. Still the same. It's not only about the custom options for the components. But for the entire file. When I type this., I can get only the $ prototyped variables.
If any variable has the same name of any file in the project, it is associating it to this file. Doesn't matter that this file has nothing to do with the file I'm editing.

I really don't get the real reason why this is happening. Even if I try to use JSDoc to manually set the types, if I go for this. it simply doesn't appear.

[marco-quintella]

Actually, I made a change in the code you said and now it's working.

import Vue from 'vue';

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    firebase?: object | ((this: V) => object)
  }
}

Seems like the lack of definition on the firebase option in the Vue instance is breaking the intellisense, not only for the data from inside this option but for the entire component.

Thanks for the help man!

[octref]

But that's included in vuefire: https://github.com/vuejs/vuefire/blob/45ebeda19541c16f8897b62c1f277020b0639021/packages/vuefire/types/vue.d.ts#L46-L51. Not sure why it's not resolved automatically. At least for vuex they are.

OK vuefire needs to include typings field like vuex do, for TS to automatically include its typings.
And vuefire needs to include types in its files. Glob doesn't seem to work — yarn add vuefire shows that the d.ts files are not published to NPM.

 foo > ls -R node_modules/vuefire
node_modules/vuefire:
dist  LICENSE  README.md  package.json

node_modules/vuefire/dist:
vuefire.common.js  vuefire.esm.js  vuefire.js  vuefire.min.js

/cc @posva. You can do the same thing as vuex is doing: https://github.com/vuejs/vuex/blob/3f87e0ad9dd82eeaa757b59b79f5ed3011008f92/package.json#L9-L15

[posva]

thanks for the ping! The latest version of vuefire and vuexfire are still under the next npm tag. I checked and the types folders are there

[marco-quintella]

The types are there, but they are not really working. I'm refactored my entire code to use Typescript and changed the database architecture to Firestore and I have the same when I try to make a class from the data retrieved from firestore. Seems like the type definitions are not that complete yet.

[octref]

@MQDev You might be running into vuejs/vue#9873

[marco-quintella]

I got the following, even if I code in js, it's been required to have the typescript type definitions for all unknown modules or new ones that I write. Perhaps it's something with TS itself, cause as I refactor my code to TS I constantly find inconsistencies in packed type definitions in modules that I was using when I was coding only js. And then, as soon I typed anything inside a vue file that have 1 only inconsistency that in TS would generate an error, it just breaks the functioning of vetur.

[octref]

I still have access to your repo. Mind showing a gif and repro steps?