Submitted by Erik Wegner
on
Aufmacherbild
The Helix Editor project implements a modal console editor in Rust. It is heavily inspired by vim, neovim and Kakoune.
My attempt to edit an angular project startet with the issue Add Angular support #4861 and this post: https://github.com/morlinbrot/helix-webdev-config.
To install the required language servers, I set up a local bin directory for npm binaries (source):
Setup dependencies
npm config set prefix '~/.local/'
mkdir -p ~/.local/bin
export PATH=~/.local/bin/:$PATH
npm install -g typescript-language-server typescript vscode-langservers-extracted emmet-ls prettier
npm install @angular/language-service @angular/language-serverTo configure the helix editor, you can put a languages.toml inside a .helix/ folder.
.helix/languages.toml
[language-server]
emmet-ls = { command = "emmet-ls", args = [ "--stdio" ]}
[language-server.angular]
command = "npx"
args = ["ngserver", "--stdio", "--tsProbeLocations", "node_modules", "--ngProbeLocations", "node_modules"]
[language-server.eslint]
command = "vscode-eslint-language-server"
args = ["--stdio"]
[language-server.eslint.config]
codeActionsOnSave = { mode = "all", "source.fixAll.eslint" = true }
format = { enable = true }
nodePath = ""
quiet = false
rulesCustomizations = []
run = "onType"
validate = "on"
experimental = {}
problems = { shortenToSingleLine = false }
[language-server.eslint.config.codeAction]
disableRuleComment = { enable = true, location = "separateLine" }
showDocumentation = { enable = false }
[language-server.vscode-json-language-server.config]
json = { validate = { enable = true }, format = { enable = true } }
provideFormatter = true
[language-server.vscode-css-language-server.config]
css = { validate = { enable = true } }
scss = { validate = { enable = true } }
less = { validate = { enable = true } }
provideFormatter = true
[[language]]
name = "typescript"
language-servers = [ "typescript-language-server", "eslint", "emmet-ls" ]
formatter = { command = "prettier", args = [ "--parser", "typescript" ] }
# formatter = { command = "dprint", args = [ "fmt", "--stdin", "typescript" ] }
auto-format = true
[[language]]
name = "tsx"
language-servers = [ "typescript-language-server", "eslint", "emmet-ls" ]
formatter = { command = "prettier", args = [ "--parser", "typescript" ] }
# formatter = { command = "dprint", args = [ "fmt", "--stdin", "tsx" ] }
auto-format = true
[[language]]
name = "javascript"
language-servers = [ "typescript-language-server", "eslint", "emmet-ls" ]
formatter = { command = "prettier", args = [ "--parser", "typescript" ] }
# formatter = { command = "dprint", args = [ "fmt", "--stdin", "javascript" ] }
auto-format = true
[[language]]
name = "jsx"
language-servers = [ "typescript-language-server", "eslint", "emmet-ls" ]
formatter = { command = "prettier", args = [ "--parser", "typescript" ] }
# formatter = { command = "dprint", args = [ "fmt", "--stdin", "jsx" ] }
auto-format = true
[[language]]
name = "json"
formatter = { command = "prettier", args = [ "--parser", "json" ] }
# formatter = { command = "dprint", args = [ "fmt", "--stdin", "json" ] }
auto-format = true
[[language]]
name = "html"
language-servers = [ "vscode-html-language-server", "emmet-ls" ]
formatter = { command = 'prettier', args = ["--parser", "html"] }
auto-format = true
[[language]]
name = "css"
language-servers = [ "vscode-css-language-server", "emmet-ls" ]
formatter = { command = 'prettier', args = ["--parser", "css"] }
auto-format = true
[[language]]
name = "angular"
scope = "source.angular"
roots = ["angular.json"]
language-servers = [ "angular", "vscode-html-language-server", "typescript-language-server", "eslint", "emmet-ls" ]
file-types = ["ts", "html", "typescript"]
formatter = { command = "prettier", args = [ "--parser", "typescript" ] }
auto-format = true
In the end, the language server was attached to both html and typescript files. Treesitter was able to extract symbols and jumping to definitions from the html source was possible.
Syntax highlighting did not work as in the whole file contents was displayed in one color.