Helix Editor - Volar Setup - How to?

[4nd1m4n]

Hello Volar Team,

I'm currently trying out the helix editor and i like how blazingly fast it is.

However, for now they only have vue support via vls but not volar jet.
But one can configure their own language support via just adding a few lines.

The vls-server is configured like this in a *.toml file format:

[[language]]
name = "vue"
scope = "source.vue"
injection-regex = "vue"
file-types = ["vue"]
roots = ["package.json", "vue.config.js"]
indent = { tab-width = 2, unit = "  " }
language-server = { command = "vls" }

[[grammar]]
name = "vue"
source = { git = "https://github.com/ikatyang/tree-sitter-vue", rev = "91fe2754796cd8fba5f229505a23fa08f3546c06" }

Can someone tell me how i could transform this to use volar instead?
For example Here on Reddit i read, that i at least need these two fields:

[[language]]
name = "vue"
language-server.command = "?????"

Of course the whole configuration would also be appreciated, but what would the language-server.command be?

[johnsoncodehk]

@volar/vue-language-server command is vue-language-server: https://github.com/johnsoncodehk/volar/blob/676b815e1df4e4ccf24045758b0181fa29836a2e/vue-language-tools/vue-language-server/package.json#L11

And you also needed to add { typescript: { tsdk: '.../node_modules/typescript/lib' } } setting for server init options: https://github.com/neovim/nvim-lspconfig/blob/80e81b158d7dd2d4baa0384560b226d089b3a8fe/lua/lspconfig/server_configurations/volar.lua#L72-L80

[johnsoncodehk]

Just in case, are you sure you have installed @volar/vue-language-server instead of vue-language-server?

In my opinion nothing is missing in terms of setup, { typescript = { tsdk = "/home/my-name/Documents/GitHub/project-name/frontend/node_modules/typescript/lib" } } is all what you need to provide for volar. Maybe you can consider ping the maintainer of Helix to see.

[4nd1m4n]

How would i double check that?
I uninstalled the vue-language-server that i had installed before as they guide you through in the helix installation process.
This it is no longer listed in my global packages, but after installing volar language server that one is.

So when i check my global npm packages i get:

npm list -g --depth 0                  
/home/andreas/.nvm/versions/node/v17.0.1/lib
├── @bubblewrap/[email protected]
├── @marp-team/[email protected]
├── @volar/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[4nd1m4n]

Unfortunately I don't yet have an answer but i found something quite close to it probably.
However in that version they specify exactly which file in .../typescript/lib they set as the tsdk.

Is "just" ...typescript/lib really enough?
Or could i specify something more specific like ...typescript/lib/foobar.js?
If so which one?

[4nd1m4n]

Wait!
Don't waste your time.

I just tried it out with this config:

[[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]
tsdk = "/home/andreas/.nvm/versions/node/v17.0.1/lib/node_modules/typescript/lib"

[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 = 120 }

And all of the sudden i got all the LSP features working!

My only problem is the hardcoded link now, but i might be able to resolve that later somehow.
If someone want's to add that you are welcome.
I will look into it in a while and try it out as is for now.

Thanks again for your friendly support. :)

[johnsoncodehk]

These lines can be remove. :)

[[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]
tsdk = "/home/andreas/.nvm/versions/node/v17.0.1/lib/node_modules/typescript/lib"

- [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 = 120 }

[4nd1m4n]

Thank you for your help again.
As you mentioned i took my problem over to the helixians.

For the interested this is my question: helix-editor/helix#2194 (comment)

[menzil]

Hello, you can configure that with:
https://github.com/helix-editor/helix/wiki/Language-Server-Configurations
https://www.npmjs.com/package/@vue/typescript-plugin