Vue file. Intellisense shows outdated list of exported members

[undefinederror]

• I searched through existing issues.
• I have looked through docs at https://vuejs.github.io/vetur/

Info

• Platform: Win
• Vetur version: 0.9.3
• VSCode version: 1.14.2

Problem

Sorry if this was already brought up, but I can't seem to find this mentioned in other issues.

In a .vue file, VS Code intellisense fails to retrieve exported members that have been added after the language server has started. third doesn't show up in the list.

From a plain .js file intellisense shows all exported members

Other that obviously closing and reopening VS Code, I found that changing the lang attribute in the script tag does refresh the list of exported members, while closing and reopening the file has no effect.

This happens for both js/ts.

Happy to provide additional details if needed.

[HerringtonDarkholme]

Thanks for report. This is a known issue.

Vue language server, the underlying server that power vetur, implements file change depending solely on editors. We need to change file change via file watching.

[undefinederror]

Thank you for your reply. Yes I thought this must have indeed been a known issue.

Looking forward to the next versions of vetur (expecially TLint integration).I am very impressed by it. Absolutely great job!

[Frizi]

This issue seems very irritating now. I have to restart the editor very frequently or do hacks like changing lang="ts" to lang="tsx" and back every time I edit any ts or d.ts file.

I could help implementing a fix, but I would need some general guidance how to do it and where could it fit. This especially includes the general setup of plugin development. Done it before for atom, but vscode seems very different in that aspect.

[octref]

Need to think about how to do this, since the suggested file watching approach can be expensive on large projects.

[Frizi]

I tried to look around how is it currently tackled, just out of curiousity. Could you explain a bit how does the plugin manage to respond on *.vue file updates, or maybe how does the typescript language server manages to do the same with all ts/d.ts/js files?

[HerringtonDarkholme]

@Frizi https://github.com/vuejs/vetur/blob/master/server/src/modes/script/serviceHost.ts#L97-L120

And grepping updateCurrentTextDocument will tell you how vetur updates vue file script.

For tsserver, you can read the source code in TypeScript's repo.

Implementing file watching isn't that hard. But I don't have the confidence to spend that much man effort for it. Indeed, two full time TS core team members spend about several weeks to implement tsserver IIRC.

[HerringtonDarkholme]

Now watcher API is exposed in the venerable TS2.7

microsoft/TypeScript#20234

Let's do it!

Sadly, the watcher API is only for code transpilation. No Language Service is supported 😢
We still need to implement our own watcher.

[MisterGoodcat]

I don't want to sound ungrateful, because you clearly have done a tremendous job with this project - thank you for that.

However, this issue obviously is the most critical showstopper for anyone considering TypeScript for single-file components, and it's beyond me how this is unadressed for such a long time. Anything but the most trivial applications will run into this problem immediately, and the whole benefit of your great plugin is turned useless by that. I personally have given up SFC solely because of this issue. :(

Anyway, I just wanted to leave some feedback to maybe add some more importance to it; please don't take it as bashing, I still marvel at what you have achieved so far.

[HerringtonDarkholme]

@octref Can you give a look at this?

I'm really busy with my new day job. Working on weekend doesn't allow me to invest much time on OSS.

[HerringtonDarkholme]

I have pushed a crude watcher for this ticket.

I don't think is well refined. Let's reopen this issue.

[georggrab]

@HerringtonDarkholme That watcher implementation looks like a fine solution to me for the time being; I've just tested it and it seems to work fine. What makes you think it is not well refined? I agree this is quite ugly, but as long as VS doesn't provide their own Watcher API, it seems to be the only solution. I would be in favor of releasing the Plugin with this fix, this issue has been open for way too long for being this critical.
Otherwise, if you could elaborate on what is missing from the fix, I'd be willing to put some time into it.

[tbsvttr]

I am very very grateful for all your good work, but this needs to be fixed soon.

[HerringtonDarkholme]

You can download preview version here. https://github.com/vuejs/vetur/releases/tag/0.11.8

The preview has a watcher for script update outside of vue file.

[biluochun]

Vetur:0.11.8 Add a crude file watcher. Now Vetur will pick up text change in TS/JS. Note this feature is experimental. Partially fix
Vetur:0.12.3 The new version seems to remove this support

[Tenrys]

This is still an issue as of 0.12.3.

[s-KaiNet]

@Tenrys the change was reverted because of some CPU issues. Let's wait for #800 to be resolved, because it should resolve the current issue as well.

[Tenrys]

I just saw, is it something that is going to be fixed as soon as the new VSCode version comes out or will a fix have to be developed once it does?

[s-KaiNet]

I believe it doesn't have any dependencies on vscode, FileEvents are available today. From my POV that's some ongoing work to centralize and unify some internal things in vetur, which also resolves the current issue. @octref please correct me if I'm wrong :)

[Tenrys]

I was wondering because of microsoft/vscode#49327, the "Extension Contributions" part. However I just setup Insiders and it doesn't seem to make a difference. I'm not sure if this means that some new APIs are going to come out that are going to help with this.

[octref]

[Tenrys]

I just tried the latest revision out with the latest version of Insiders, and there seems to be an improvement!

However I'm noticing that the linter will only update/refresh if you type in the .vue file, if you do something like make a breaking change in another .js / .ts file which would render the .vue file's <script> area invalid.

Is this intended? Other linters update as soon as any referenced file is invalidated.

[s-KaiNet]

@Tenrys do you use TSLint Vue plugin? I believe it should catch all cases.

[Tenrys]

Well, I didn't know about that plugin and installed it, thanks. But that doesn't solve the issue, this is what I mean:

That warning will go away only once I type in my .vue file. It feels it should go away as I make changes. Or is it a setting I'm not aware about?

[s-KaiNet]

Probably @octref better knows the answer. For me it feels like an issue.

[octref]

@Tenrys Did you build from source and is running it? I haven't published the change yet.

[Tenrys]

Yeah I did, I cloned last revision then followed the instructions from CONTRIBUTING.md, though I also had to run yarn compile in the root folder to make IntelliSense work.
There is a difference from version 0.12.3 when it just wouldn't update unless I updated the lang attribute of the <script> area.

[octref]

@Tenrys Can you try to create a minimal example out of https://github.com/octref/veturpack?

Also you need to show how your Vue file looks like. I can't guess all the problems. I need repro cases to debug.

[Tenrys]

I'm not sure what I can showcase better using that repository, so here's a visual example of my issue, with the file structure and the code being displayed.

I am using the latest Insiders build and the latest revision from this repository, built using the instructions from CONTRIBUTING.md and running yarn compile in the extension's root directory. I've tried having all extensions disabled, except for Vetur, as well as debugging the extension, the result was the same.

https://tenrys.pw/ShareX/2018/Jun/fteE.mp4

Hopefully this helps you a bit more than what I sent earlier.

[octref]

@Tenrys Thanks for the report. The issue is I'm not retriggering error-checking on Vue files for each update/file change in TS.

[octref]

That's fixed too. I'm rerunning error-checking on all opened Vue files when you change JS/TS files. Let me know if this causes any performance problems.

[Tenrys]

Great work! Now it does the error checking as soon as I save or change a file. I'll make sure to notify you here if there is any performance issue with this change.

[octref]

This change is published to 0.12.4.