Vue3 and Helix Editor on macOS

In the current release of Helix Editor (22.12) the default language server for Vue is still VLS, which doesn’t work well with Vue3. But you can install Volar as well.

More on helix-editor can be found here:

1. Install the Volar Language Server globally

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

2. Add Volar to your languages.toml

you should normally find the languages settings file under

~/.config/helix/languages.toml

or wherever you installed helix.

Please note that every language needs its own [[language]] “header”, in case you have already another language configured.

Please add the following settings:

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

[language.config.typescript]
tsdk = "/usr/local/lib/node_modules/typescript/lib"

My configuration

you can clone my configuration. Helix Editor’s configuration on macOS are usually located in your home directory under:

~/.config/helix/