Problems with `@vue/typescript-plugin`

[stefanfrede]

I've recently switched to Helix and I'm struggling to get the Vue language server to work with the @vue/typescript-plugin, which as far as I can tell is the way to go.

I was able to get it to work more or less with this configuration:

[language-server.vuels]
command = "vue-language-server"
args = ["--stdio"]

[language-server.vuels.config]
typescript = { tsdk = <path to ".volta/tools/shared/typescript/lib"> }
vue = { hybridMode = false }

[[language]]
name = "vue"
auto-format = true
language-servers = ["vuels"]
formatter = { command = 'prettier', args = ["--parser", "vue"] }

But my approach to get it to work with the @vue/typescript-plugin fails:

[language-server.typescript-language-server.config]
plugins = [{  name = "@vue/typescript-plugin", location = <path to ".volta/tools/shared/@vue/typescript-plugin">, languages = ["vue"] }]
tsserver = { path = <path to ".volta/tools/shared/typescript/lib"> }

[[language]]
name = "vue"
auto-format = true
language-servers = ["typescript-language-server"]
formatter = { command = 'prettier', args = ["--parser", "vue"] }

After a lot of research, I'm pretty sure that this configuration should work. So I'm at a complete loss as to why it doesn't.

I have installed all packages globally using Volta.

hx --health vue looks as expected:

Configured language servers:
  ✓ typescript-language-server: <path to ".volta/bin/typescript-language-server">
Configured debug adapter: None
Configured formatter: prettier
Binary for formatter: <path to ".volta/bin/prettier">
Highlight queries: ✓
Textobject queries: ✘
Indent queries: ✘

My logs (:log-open) are empty.

And the result is that Vue SFCs are parsed as Typecript:

It seems like the whole plugin part gets completely ignored.

Apart from the above configuration, I have tried every single configuration approach that I could find and think of, but the result has always been the same.

Now I'm at my wits' end and hoping someone will have an idea and point me in the right direction.

And for that, thanks in advance!

[johnsoncodehk]

The location is incorrect, it should be path of @vue/language-server.

- plugins = [{  name = "@vue/typescript-plugin", location = <path to ".volta/tools/shared/@vue/typescript-plugin">, languages = ["vue"] }]
+ plugins = [{  name = "@vue/typescript-plugin", location = <path to "xxx/@vue/language-server">, languages = ["vue"] }]

[stefanfrede]

Thank you!

With this change I get very good support inside the <script> block, little to no support for Vue inside the <template> block, and no support inside the <script> block.

[schelmo]

if you run helix with the -v or even -vv switch, you can see the lsp communication in your :log-open

[RayGuo-ergou]

You need both vue-language-server and tsserver running to get full LSP support, in your health check, there seems only one.

[stefanfrede]

Thanks for all your input 🙏

It looks like I figured it out:

[language-server.typescript-language-server.config]
plugins = [{  name = "@vue/typescript-plugin", location = <path to ".volta/tools/shared/@vue/language-server">, languages = ["vue"] }]
tsserver = { path = <path to ".volta/tools/shared/typescript/lib"> }

[language-server.vuels]
command = "vue-language-server"
args = ["--stdio"]

[[language]]
name = "vue"
auto-format = true
language-servers = ["typescript-language-server", "vuels"]
formatter = { command = 'prettier', args = ["--parser", "vue"] }

❯ hx --health vue
Configured language servers:
  ✓ typescript-language-server: <path to ".volta/bin/typescript-language-server">
  ✓ vue-language-server: <path to ".volta/bin/vue-language-server">
Configured debug adapter: None
Configured formatter: prettier
Binary for formatter: /home/sfrede/.volta/bin/prettier
Highlight queries: ✓
Textobject queries: ✘
Indent queries: ✘