Intellisense in .vue files?

[snaptopixel]

Recent additions in TypeStrong/ts-loader#270 have made working with .vue files are reality, however the lack of intellisense between <script lang="ts"> tags severely limits usefulness.

I've added basic support here: hedefalk/atom-vue#43, but I'm not sure how to get intellisense working (haven't done any Atom dev personally)

[Maxobat]

Have you gotten any progress in getting intellisense working?

[snaptopixel]

I've looked into it @Maxobat but haven't (and likely won't) make progress any time soon.

[UnGast]

I would love to see that feature too.

[snaptopixel]

FYI, I'm using VSCode nowadays still no autocomplete in vue files, but it's nice overall. Atom got too slow for me after a while.

[UnGast]

@snaptopixel Did you try out the atom-typescript-beta package? It's a lot faster than before.

[jonboiser]

When you're working on a vue file and have language-vue installed, the autocomplete provider is actually working, but gets stuck at this line waiting for the completions

https://github.com/TypeStrong/atom-typescript/blob/master/lib/main/atom/autoCompleteProvider.ts#L75

In the debugger, I found that when sending the completions request to tsserver, I get an error back

"Error processing request. No Project.
Error: No Project.
    at Object.ThrowNoProject (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:75710:23)
    at IOSession.Session.getFileAndProjectWorker (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:80056:42)
    at IOSession.Session.getFileAndProject (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:80046:29)
    at IOSession.Session.getCompletions (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:80196:31)
    at Session.handlers.ts.createMapFromTemplate._a.(anonymous function) (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:79346:61)
    at /Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:80657:88
    at IOSession.Session.executeWithRequestId (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:80648:28)
    at IOSession.Session.executeCommand (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:80657:33)
    at IOSession.Session.onMessage (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:80677:35)
    at Interface.<anonymous> (/Users/jon/github/vue-ts-hacks/node_modules/typescript/lib/tsserver.js:81864:27)"

BTW, in VSCode with the vetur package, you do get type errors and intellisense when working inside of .vue files, so they must have found a way around this.

[qm3ster]

So, it's actually enabled in source.ts.embedded.html scope, there's just a bug at the moment?

[TotomInc]

Vue now have official support for Typescript since a few months (Vue 2.5) and the most used Typescript package for Atom doesn't have support for ts inside .vue files. Is someone working on this? Is there any work already done? There are no way to actually benefit of ts inside .vue files (no modules, no workaround).

[snaptopixel]

The vetur package for VS Code supports it @TotomInc

[TotomInc]

But we are talking about an Atom package here, I don't want to switch to VS Code only for this feature. I mean, if I wanted to use VS Code instead of Atom, I would not be here and look for this issue. There must be a way to implement TS autocomplete on .vue files.

[lierdakil]

I wonder why the discussion about supporting vue files is even here in the first place. Try looking at vue-specific packages maybe? https://github.com/rwatts3/atom-ide-vue for instance.

[TotomInc]

Maybe I'm still here because atom-typescript is the only TypeScript package you will ever need... It looks like it's this package job to offer an Intellisense for .vue files, or am I wrong? Is the direction of this package to implement libraries support (react, angular, vue, ...)?

[lierdakil]

TypeScript package though. Nobody ever said anything about third-party library support. .vue files aren't TypeScript, are they?

I don't use vue, and I'm the last active maintainer left on this project. PRs are welcome. If it turns into a lot of vue-specific code I would kindly request to make it into a separate package, because I won't be able to maintain that. If that hypothetical package needs to interface with atom-typescript, I will be happy to discuss that.

[TotomInc]

I would really like to contribute but I have 0 experience with Atom packages and making an Intellisense package communicate with a Vue Language Server seems kinda hard as an introduction to Atom packages. 😄

[lierdakil]

https://github.com/atom/atom-languageclient is the place to start when considering language server integration. https://github.com/rwatts3/atom-ide-vue does exactly that by the way, but it's somewhat outdated, so probably needs a few updates.

[noe132]

hey guys, I managed to get intellisense working in vue files, by hacking atom-typescript a little bit.

The idea is to remove all the non-ts-related code, leaving code in script tag in place, before the content was send to the tsserver.
Currently what I did is replace lines not inside script tag to empty lines when opening the file, then the tsserver would be able to parse it and get autocomplete.

But sad news is that even if typescript in working on vue files, tslint still not working ,which it important too(at least for me).
It was just a simple test of an idea of get it working and now only working at files open, but still have thing to do to make it working well.

[lierdakil]

A better approach could be writing a tsserver plug-in instead of hacking the client.

[TotomInc]

Can't this plug-in be made like atom-ide-vue? If so, why not contributing on the repo?

[noe132]

I modify the package and get it working on vue files by hacking it, it's on https://github.com/noe132/atom-typescript/tree/vue-hacking now. To get and test it by clone the vue-hacking branch and link to atom by runing apm link inside the repo.
The way I code is kinda dirty but works, by remove content ouside ts script tag as I commented above.

@lierdakil I read some docs about implementing a tsserver plugin, it looks like there's no way to modify the file content before tsserver parse it by a tsserver plugin.
So vue can be treated as super set of typescript, and containing valid typescript code inside any <script lang="ts"> tags. As it seems no way to extends the behaviour of tsserver language spec by a plugin, modify the vue files content before send to tsserver might be a good way to do it.

Maybe a plugin package for atom-typescript would be good to do it. Changes made to atom-typescript are

1. activate the package on vue
2. disable compileOnSave on vue
3. modify the content when open and save vue file

if those functions are plug-in-able it'd be able to write a plugin package for atom-typescript.

[noe132]

Btw, another concern is that I found that we can using tslint-language-service to get tslint linting results in typescript compiler.
Using the tslint-language-service, as I was simply remove non-ts code, some tslint rules like indentation or max empty-lines would likely to fail because there are lots of empty lines which is replacement of other html code.

But what I founds in vscode extension vetur, it looks like it ignore the tsconfig.json and no tsserver plugins are loaded and I don't get errors report by that plugin.

And I've heard that eslint-plugin-vue maintain a code position map between original vue files and extracted javascript code while sending the extracting the js and send it to eslint lint core.

It looks like not a simple task to implement a similar one like eslint-plugin-vue on extracting the ts code out of the vue file, and fix something like default indentation. It means I have to modify other functions like remap the error to the actual position in the original files before atom-typescript sending lint result to linter and display it.😝

Anyway, It's just another thought about the vue files extracting and linting part, and trying find a best way to get it working on vue files

[TotomInc]

It works very well on my Vue + Typescript project. 👍

I think I'm going to switch to your branch on my Atom until this is merged.

[lierdakil]

I read some docs about implementing a tsserver plugin, it looks like there's no way to modify the file content before tsserver parse it by a tsserver plugin.

I'm pretty sure Angular does it somehow. Maybe I'm wrong though.

[lierdakil]

Side note: if it's really impossible to plug via tsserver, I can figure out some sort of a plug-in system for atom-typescript, but that will take a bit. I would really prefer a more generic solution though so that potentially more people could benefit from it without gluing that to atom-typescript in particular

[noe132]

@lierdakil I'll try digging further into it and go check how angular implement this and to see what can be done with it

[TotomInc]

Any update on this? @noe132 have you stopped working on this?

[sploders101]

For anyone coming across this later as I have, the atom-ide-ui, paired with ide-vue and ide-typescript will allow this. I'd suggest checking it out if you still can't get this working.

[jtumano]

@sploders101 I can confirm that in your proposed solution intellisense working, but linting not

[sebkolind]

@sploders101 @jtumano I can't get Intellisense or Linting to work with those packages. Have you done anything else to achieve this?

[github-actions]

This issue has been marked as stale because it did not have any activity for the last 90 days or more. Remove the stale label or comment or this will be closed in 14 days