Implementing Vue LSP

[tommasongr]

I'm trying to implement the Vue Language Server, unfortunately I didn't get that far.

First of all the custom Completions for Vue and the standard Completions for html and css are not shown anymore. Javascript syntax has improved a little bit but not significantly improvements to vue. For example this doesn't offer intellisense as it should. I have no clue on how to implement a correct version of this 😕

If anyone can help me, I'd really appreciate it 🙏

@apexskier I've seen that you worked on a similar thing for typescript. Would you mind taking a look at it?

[apexskier]

Hey, happy to help out and take a look. Sounds like you've tried something so far - can you share the branch you're working off of?

[tommasongr]

Thank you so much! Here it is: https://github.com/tommasongr/nova-vue/tree/vue-lsp

[apexskier]

The first thing I see is

Vue[17:01:15.944000] Error: Could not find an executable for process: /Users/cameronlittle/Dev/nova-vue/Vue.novaextension/node_modules/vls/bin/vls

because the extension's not running a self-install, like mine does. (I use shrinkwrapping, which I'd recommend over a second package-lock.json, since it's intended for publishing like this. There's no effective difference, but I feel it makes it more obvious what's going on) (looks like your language server has a ton of dependencies, which is a bit annoying)

After installing, it looks like the language server starts up with no issues. I'd recommend naming it something different than "Vue" to differentiate extension console output between your extension and the language server. (I don't get any functionality off the bat because a .vue file isn't automatically recognized as using Vue syntax - I needed to change it from plain text manually. I think this is because I'd opened the file before loading the extension,)

It looks like the language server is doing something... this suggestion isn't provided without it.

---

For example this doesn't offer intellisense as it should.

Note that nova doesn't offer suggestions immediately after typing this.. It currently requires you to type at least one other character as well (https://dev.panic.com/panic/nova-issues/-/issues/1464, apexskier/nova-typescript#30). Also note that Nova doesn't yet support a bunch of LSP commands natively (although I think they're planning on improving this). Most of my typescript extensions's functionality is manually implemented.

---

First of all the custom Completions for Vue and the standard Completions for html and css are not shown anymore.

I'm not sure what the custom completions are supposed to be doing, but I definitely see new completions coming from the language server. I've only played with nova completions a tiny bit, but I wouldn't be entirely surprised if running a language server conflicted with other custom defined completions from the same extension.

[tommasongr]

Thank you so much for your time and feedback!

Thanks for the suggestions of using shrinkwrapper, i'll definitely merge your pull request #4

---

It looks like the language server is doing something... this suggestion isn't provided without it.

Yes I saw that, what I ment was that on vscode for example the suggestion for this includes a lot of stuff coming from the vue instance.

---

These are some completions that I defined specifically for the vue-html subsyntax.

The LSP overtooks them and provides these instead

Nothing wrong until you confirm and... it escapes and places $1 inside the brackets. I suppose this is the vscode syntax for placeholders in completions. This occurs not only in html but also in every other completions provided by the LSP.

---

Also the standard completions for other things like css are gone

Expected:

Actual:

Maybe @panicinc can take a look on this?

[yoyo930021]

Hi, I'm a Vetur project contributor.

I work in this issue.
vuejs/vetur#2233
It can solve many dependencies problem.

Maybe you can wait this issue.
I will try to help when issue finished.

[tommasongr]

It would be great! Thanks for your contribution! @yoyo930021

[apexskier]

Nothing wrong until you confirm and... it escapes and places $1 inside the brackets. I suppose this is the vscode syntax for placeholders in completions. This occurs not only in html but also in every other completions provided by the LSP.

I see... I think this is something we'll need Panic to solve.

The LSP does have support for completion placeholders. It kind of looks like Vetur's language server is generating placeholders, but I'm not positive. That's something to confirm by inspecting the messages it's sending. If it does, my guess is that Panic hasn't yet added support for them from Nova's side.

[jonowells]

The LSP does have support for completion placeholders. It kind of looks like Vetur's language server is generating placeholders, but I'm not positive. That's something to confirm by inspecting the messages it's sending. If it does, my guess is that Panic hasn't yet added support for them from Nova's side.

From the Nova 1.2 Release Notes:

• Extensions: Added support for the LSP Snippet format in completions

[tommasongr]

@jonowells I tried yesterday 1.2 updates with the already in place implementation of vls but it still autocomplete with e.g: v-if="$1"

@apexskier gives it a try too and found the same issue.

I reached out some folks at Panic and they are looking at it. Let's see

[laosb]

Now Nova 2 has been released. Any improvements on this?

[tommasongr]

@laosb I started looking at it yesterday evening! The LSP already works. The problem right now is that the LSP overrides the custom defined completions and their completions are not the best to be honest... I'm looking to a way to disable the LSP completion feature but I'm not sure on how VLS works.

The working branch is language-server. vls is there just for reference.

@yoyo930021 Can you help me on this?

[yoyo930021]

@laosb I started looking at it yesterday evening! The LSP already works. The problem right now is that the LSP overrides the custom defined completions and their completions are not the best to be honest... I'm looking to a way to disable the LSP completion feature but I'm not sure on how VLS works.

@yoyo930021 Can you help me on this?

I can add option for disable LSP completion.
But I don't think vls completion would be worse.
After all, we have TypeScript support.

[tommasongr]

I can add option for disable LSP completion.
But I don't think vls completion would be worse.
After all, we have TypeScript support.

@yoyo930021 sorry about that I guess I didn't explain myself correctly. Is not about what vls has but what it doesn't have. Take a look... This kind of completions are not available in vls and if an LSP is activated the custom completions are not shown.

However I've been able to show them programmatically through the Nova API. I think I'll rewrite them this way

[tommasongr]

Another option might be to add the completions to the LSP directly but I'm not sure if is it possible with VLS and eventually how to do that. In that case it would be possible to scope the completions to the export default only? and maybe customize them based on the lang type (js, ts, ...)?

[tommasongr]

Now Nova 2 has been released. Any improvements on this?

@laosb Vetur mode has finally landed on Nova! Slap that update button! 🥳

https://twitter.com/tommasongr/status/1320367367596183552

[tommasongr]

Since the LSP is implemented I'll close the issue. Thank you all guys!

[yoyo930021]

Sorry it's a little late to reply.
I welcome you send a PR to vetur about that snippets.
For example, Javascript can be added here.
https://github.com/vuejs/vetur/blob/master/server/src/modes/script/javascript.ts#L141

It also appears that nova doesn't allow you to use both at the same time.
If two extensions are used, can this problem be solved?
Maybe a similar idea could be the solution.

[tommasongr]

@yoyo930021 Thanks! I'll take a look at both strategies!

Anyway can I ask you why intellisense works flawlessly inside script tag but when it comes to the template it doesn't seem to exist at all? I would love to fix that too, thanks

[yoyo930021]

@yoyo930021 Thanks! I'll take a look at both strategies!

Anyway can I ask you why intellisense works flawlessly inside script tag but when it comes to the template it doesn't seem to exist at all? I would love to fix that too, thanks

I'm not sure what part of intellisense you're referring to in the template.
There are five relevant sections here.

1. HTML5 tag or attrs

This part is written directly in Vetur.

2. Vue tag or attrs

This part is written directly in Vetur.

3. External component data provided by library.

Vetur read package.json in project root.

4. Vue components are defined in the file.

Vetur read components: {} in current file, and try to parse them.

5. TypeScript is provided based on the current component.

When v-bind, v-if, v-for, {{ }} in template, Vetur transform template to js code. Provided via typescript.
This feature is disabled by default. please set { "vetur.experimental.templateInterpolationService": true } to open it.

[tommasongr]

@yoyo930021

I'm not sure what part of intellisense you're referring to in the template.

As you can see inside the template directives intellisense is not working. This is the only problem I've found for now, everything else works well.

If this is caused by { "vetur.experimental.templateInterpolationService": true } how can I set this command in Nova? And why in vscode I haven't had to set this command to have the feature? Thanks

[yoyo930021]

@yoyo930021

I'm not sure what part of intellisense you're referring to in the template.

As you can see inside the template directives intellisense is not working. This is the only problem I've found for now, everything else works well.

If this is caused by { "vetur.experimental.templateInterpolationService": true } how can I set this command in Nova? And why in vscode I haven't had to set this command to have the feature? Thanks

This is a option in setting not a command.
In VSCode, it is same as editor config.
VScode will send setting to LSP.

Vetur can send setting when init.
https://github.com/vuejs/vetur/blob/70609ef531ccd1884410ac366b5a3ae08174ceb4/client/client.ts#L56
You can try to use this for test.
But understanding LSP and setting with nova is important.