Volar support

[cheeze2000]

Describe your feature request

Please support Volar for Vue 3 as Vetur only supports Vue 2.

Volar was mentioned in this pull request but I wonder why it could not work. Things I have tried:

1. Installing the language server through npm install -g @volar/vue-language-server typescript
2. Adding this into .config/helix/languages.toml

[[language]]
name = "vue"
file-types = ["vue"]
language-server = { command = "vue-language-server", args = ["--stdio"] }

3. Verifying the installation with hx --health

However, opening a .vue file throws this into the logs

2022-04-20T21:12:09.123 helix_lsp::transport [INFO] -> {"jsonrpc":"2.0","method":"initialize","params":{"capabilities":{"textDocument":{"codeAction":{"codeActionLiteralSupport":{"codeActionKind":{"valueSet":["","quickfix","refactor","refactor.extract","refactor.inline","refactor.rewrite","source","source.organizeImports"]}}},"completion":{"completionItem":{"snippetSupport":false},"completionItemKind":{}},"hover":{"contentFormat":["markdown"]},"rename":{"dynamicRegistration":false,"honorsChangeAnnotations":false,"prepareSupport":false}},"window":{"workDoneProgress":true},"workspace":{"configuration":true,"didChangeConfiguration":{"dynamicRegistration":false}}},"processId":4503,"rootUri":"file:///home/cheeze/repos/test"},"id":0}
2022-04-20T21:12:09.454 helix_lsp::transport [INFO] <- {"jsonrpc":"2.0","id":0,"error":{"code":-32603,"message":"Request initialize failed with message: Cannot read properties of undefined (reading 'documentFeatures')"}}
2022-04-20T21:12:09.454 helix_lsp::transport [ERROR] <- Internal error: Request initialize failed with message: Cannot read properties of undefined (reading 'documentFeatures')
2022-04-20T21:12:09.454 helix_lsp [ERROR] failed to initialize language server: protocol error: Internal error: Request initialize failed with message: Cannot read properties of undefined (reading 'documentFeatures')
2022-04-20T21:12:14.602 helix_lsp::transport [INFO] Language server not initialized, delaying request

I feel like it has something to do with the default value of init_options as stated here. I am using Helix release 22.03

[the-mikedavis]

It looks like it might need some extra non-LSP config. Here's what sublime configures: https://github.com/sublimelsp/LSP-volar/blob/1a52710ba115cd1bfe958777b0d16721b5745ec1/LSP-volar.sublime-settings

I don't see any references to documentFeatures in the LSP spec so I assume that configuration is specific to Volar.

[noor-tg]

any news about this ?

[Niedzwiedzw]

I'm having similar issues, my config so far is

❯ cat ~/.config/helix/languages.toml
───────┬────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: /home/niedzwiedz/.config/helix/languages.toml
───────┼────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ [[language]]
   2   │ name = "vue"
   3   │ file-types = ["vue"]
   4   │ language-server = { command = "vue-language-server", args = ["--stdio"] }
───────┴─────────────────────────────────────────────────────────────────────────────────

and I'm getting

2022-06-18T19:37:10.129 helix_lsp [ERROR] failed to initialize language server: protocol error: Internal error: Request initialize failed with message: Cannot read property 'typescript' of undefined

[Niedzwiedzw]

https://github.com/emacs-lsp/lsp-mode/blob/master/clients/lsp-volar.el anyone here speaks elisp? :D this guy made the best-working implementation for spacemacs, maybe if we ask nicely he will help us a bit :D @yyoncho

[Niedzwiedzw]

[[language]]
name = "vue"
file-types = ["vue"]
language-server = { command = "vue-language-server", args = ["--stdio"] }
scope = "text.html.vue"
roots = ["package.json"]
injection-regex = "vue"
config = {typescript = {serverPath = "/home/niedzwiedz/Pieprzyk/prometeusz/prometeusz-front/node_modules/typescript/lib/tsserverlibrary.js"}}}

this works but

1. typescript server path needs to be hardcoded, in my case it's the one that is installed in my project
2. running ANY code action results in an error

2022-06-18T22:03:26.181 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/codeAction
2022-06-18T22:03:29.438 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/codeAction
2022-06-18T22:03:34.971 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/definition
2022-06-18T22:03:37.234 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/definition
2022-06-18T22:03:39.781 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/definition
2022-06-18T22:04:10.482 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/definition
2022-06-18T22:04:11.506 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/definition
2022-06-18T22:04:13.788 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/codeAction
2022-06-18T22:04:18.995 helix_lsp::transport [ERROR] <- MethodNotFound: Unhandled method textDocument/codeAction

from what I remember vetur had an issue where it would not support textDocument/* methods at all, only workspace/* or something like this... gonna investigate some more

[Niedzwiedzw]

[[language]]
name = "vue"
file-types = ["vue"]
language-server = { command = "vue-language-server", args = ["--stdio"] }
scope = "text.html.vue"
roots = ["package.json"]
injection-regex = "vue"

[language.config.typescript] # this part must be hardcoded sadly, if anyone figures out how to provide a relative path let me know
serverPath = "/home/niedzwiedz/Pieprzyk/prometeusz/prometeusz-front/node_modules/typescript/lib/tsserverlibrary.js"

[language.config.languageFeatures]
semanticTokens = false
references = true
definition = true
typeDefinition = true
callHierarchy = true
hover = true
rename = true
renameFileRefactoring = true
signatureHelp = true
codeAction = true
completion = { defaultTagNameCase = 'both', defaultAttrNameCase = 'kebabCase' }
schemaRequestService = true
documentHighlight = true
documentLink = true
codeLens = true
diagnostics = true
    
[language.config.documentFeatures]
documentColor = false
selectionRange = true
foldingRange = true
linkedEditingRange = true
documentSymbol = true
documentFormatting = { defaultPrintWidth = 100 }

this works, and surprisingly well I must add!

[zetashift]

It seems to do additional logic in finding tsserver.js where Volar is installed? Am I seeing that right?

[Niedzwiedzw]

I needed to redo this, and now I see I forgot to mention it: you need to install following libs first (based on neovim's config)

npm i -g @volar/shared @volar/vue-language-server typescript vscode-languageserver-types

in my case vue-language-server was automatically in path, and the path for in my languages.toml I have the following thing

[[language]]
name = "rust"
[language.config.cargo]
features = "all"

[language.config.checkOnSave]
command = "clippy"


[[language]]
name = "vue"
file-types = ["vue"]
language-server = { command = "vue-language-server", args = ["--stdio"] }
scope = "text.html.vue"
roots = ["package.json"]
injection-regex = "vue"
auto-format = true
[language.config.typescript]
serverPath = "/home/niedzwiedz/.config/nvm/versions/node/v16.16.0/lib/node_modules/typescript/lib/tsserverlibrary.js"

[language.config.languageFeatures]
semanticTokens = true
references = true
definition = true
typeDefinition = true
callHierarchy = true
hover = true
rename = true
renameFileRefactoring = true
signatureHelp = true
codeAction = true
completion = { defaultTagNameCase = 'both', defaultAttrNameCase = 'kebabCase' }
schemaRequestService = true
documentHighlight = true
documentLink = true
codeLens = true
diagnostics = true
    
[language.config.documentFeatures]
documentColor = false
selectionRange = true
foldingRange = true
linkedEditingRange = true
documentSymbol = true
documentFormatting = { defaultPrintWidth = 100 }

[noor-tg]

hi @Niedzwiedzw , thank you for sharing this config . it willy did help me develop vue apps in helix. but why scope = "text.html.vue" not scope = "text.vue"?

[Niedzwiedzw]

no idea, copied it from neovim config

[Suya1671]

any updates on volar support? This is currently the main thing that is prevent me from fully trying out helix

[krouspy]

In case someone comes across this, the solution proposed by @Niedzwiedzw works well but you may need to specify tsdk instead of serverPath for your typescript config depending of your Volar version. See associated PR on Volar side https://github.com/johnsoncodehk/volar/pull/1916.

[vv3rd]

Doesn't work for me, but just installing vls does. Most language features work, except for tree-sitter textobject based navigation such as unimpaired movements. Is that a separate thing or just lsp not fully working?

[the-mikedavis]

Textobject navigation uses tree-sitter queries (https://docs.helix-editor.com/master/guides/textobject.html) not LSP

[vv3rd]

:tree-sitter-subtree command shows (raw_text) everywhere in the script section, but seems to work correctly in the template section. I'm guessing that means textobject queries would not work in script section.

[vv3rd]

Okey, found runtime/queries/vue/injections.scm that supposed to address this. Not sure where to move from here, how can I debug injections? Should I make separate issue?

[the-mikedavis]

#2311 covers this: injections are used for syntax highlighting but don't currently affect textobjects or tree-sitter motions

[4nd1m4n]

Hello Helix Team, I also have tried to get volar working in my helix version: 22.12 on ubuntu linux.

I searched google beforehand but could not find anything useful. Then i started a discussion on the volar github page: https://github.com/johnsoncodehk/volar/discussions/2279

Now that we are stuck there i was recommended to check in with the helix team an when i wanted to do that i found this thread. However even the latest best config found here in this comment: https://github.com/helix-editor/helix/issues/2194#issuecomment-1211864340 did not work for me.

For the config.typescript.tsdk option i tried everything i could think of. Exactly the path in the comment (fixed to fit my system), just tsserver, or typescript-language-server which are all in my path but nothing worked the errors in the lsp-logs are the same.

What else could i try?

[jeannot-muller]

What else could i try?

I got this working, but on macOS. https://jeannot-muller.com/vue3-and-helix-editor-on-macos-26299554fb1f

Not sure if it will work on ubuntu too, but perhaps it gives you an idea.

[bcspragu]

So I've had this working for months (using https://github.com/helix-editor/helix/issues/2194#issuecomment-1211864340), but I've noticed that sometimes Volar uses an insane amount of RAM, like 8+ GB on a medium-ish sized project, and my computer grinds to a halt as it runs out of RAM.

It's easy for me to reproduce, I just open a *.vue file, trigger a few autocompletions, and my memory usage starts climbing. Running pstree shows a bunch of node processes:

└─tmux: server───bash───hx─┬─node───6*[{node}]
                           ├─node─┬─node─┬─node───6*[{node}]
                           │      │      └─10*[{node}]
                           │      └─10*[{node}]
                           └─18*[{hx}]

Anyone else experiencing something similar? Not sure if this is a Volar issue, or has to do with the interplay between Helix and how Volar is configured.

[idr4n]

In MacOS, for me this was not working as suggested in previous comments:

[language.config.typescript]
serverPath = "/opt/homebrew/lib/node_modules/typescript/lib/tsserverlibrary.js"

However, looking at nvim's server config, I changed it to:

[language.config.typescript]
tsdk = "/opt/homebrew/lib/node_modules/typescript/lib"

which has been working for me so far.

[djpowers]

However, looking at nvim's server config, I changed it to:

[language.config.typescript]
tsdk = "/opt/homebrew/lib/node_modules/typescript/lib"

which has been working for me so far.

I can confirm this approach from @idr4n worked for me using system Node installed via Homebrew.

If you're using a copy of TypeScript also installed from Homebrew, this path to the TypeScript server should work (essentially look for the typescript/lib directory containing tsserverlibrary.js):

[language.config.typescript]
tsdk = "/opt/homebrew/opt/typescript/libexec/lib/node_modules/typescript/lib"

Also with TypeScript already installed via Homebrew, I only needed to run npm i -g @volar/vue-language-server to install that single package. The additional packages mentioned previously in this thread didn't seem to make a difference in terms of LSP support, but correct me if I'm wrong there.