Setting up Astro lsp

[OlshaMB]

I tried to setup astro lsp with helix and failed. Could someone help me?

[mkastner]

Same here. I followed the steps in the wiki, but it doesn't work and also is shown a s not installed when starting "helix --health"

Language     LSP          DAP          Highlight    Textobject   Indent 
astro        None         None         ✓            ✘            ✘      

I am using MacOS, node 19.8.1, pnpm 8.5.1 and helix 23.03.

This is my project root's .helix/languages.toml

[[language]]
name = "astro"
scope = "source.astro"
injection-regex = "astro"
file-types = ["astro"]
roots = ["package.json", "astro.config.mjs"]
language-server = { command = "astro-ls", args = ["--stdio"] }
config = { "typescript" = { serverPath = "/my/home/projects/myproject/node_modules/typescript/lib/tsserverlibrary.js" }, "environment" = "node" }

Has anyone been able to get lsp running for astro files?

[kirawi]

It doesn't look like Helix is picking up your languages.toml

[joetrimble]

You probably want to swap out that serverPath for the actual path on your computer either at the global package or project package level. I installed typescript globally through NPM and just found that path and used the absolute version of it. Also, make sure you actually install the NPM package (@astrojs/language-server). Mine seems to be working correctly. What doesn't seem to be working is the syntax highlighting for the HTML in the file.

[swarnimarun]

Here's the answer if you are using the master branch like me, else put the command, config, args and etc inside the language-server object under languages. No changes otherwise.

[language-server.astro-ls]
command = "astro-ls"
args = [ "--stdio" ]
config = { "typescript" = { "tsdk" = "<path-to-your-global-storage>/pnpm/global/5/node_modules/typescript/lib"}, "environment" = "node" }

[[language]]
name = "astro"
scope = "source.astro"
injection-regex = "astro"
file-types = ["astro"]
roots = ["package.json", "astro.config.mjs"]
language-servers = [ "astro-ls" ]

[swarnimarun]

Do ensure you have @astrojs/language-server and typescript installed globally else use the path to them directly.

[circuitsacul]

If you're not using master, the config part needs to be under [[language]], whereas the others should be under language-server. Like this:

[[language]]
name = "astro"
scope = "source.astro"
injection-regex = "astro"
file-types = ["astro"]
roots = ["package.json", "astro.config.mjs"]
language-server = {command = "astro-ls", args = [ "--stdio" ]}
config = { "typescript" = { "tsdk" = "<path-to-global-storage>/5/node_modules/typescript/lib/"}, "environment" = "node" }

[mkastner]

Sorry for the late reply. I've not been using helix for a few weeks.

Thank for all the help and replies. I'll give it a shot ASAP.

[cor]

@mkastner did you end up giving it a try?

[valerio-pescatori]

Hi! for all the volta users, i've managed to make it work using @swarnimarun config, you just need to:

1. volta install typescript
2. volta install @astrojs/language-server
3. paste swarn's config in your languages.toml
4. replace the path to ~/.volta/tools/image/packages/typescript/lib/node_modules/typescript/lib

p.s: if you're using typescript I also recommend installing astro's ts-plugin

hope it helps :)

[brielov]

I manage to get astro working by doing a few things. Start by installing (globally): typescript, @astrojs/language-server, prettier and prettier-plugin-astro.

npm i -g typescript prettier prettier-plugin-astro @astrojs/language-server

Next, just configure the astro lsp and language in the languages.toml file like so:

[language-server.astro-ls]
command = "astro-ls"
args = ["--stdio"]
config = { typescript = { tsdk = "/home/my-user/.local/share/fnm/aliases/default/lib/node_modules/typescript/lib" }}

[[language]]
name = "astro"
scope = "source.astro"
injection-regex = "astro"
file-types = ["astro"]
language-servers = ["astro-ls"]
formatter = { command = "prettier", args = ["--plugin", "prettier-plugin-astro", "--parser", "astro"] }
auto-format = true

In my case I'm using fnm for managing node versions, so if you're using something else, update the tsdk path accordingly. This should give you typescript support and format-on-save capabilities.

Note: The astro language server should also give you emmet support out of the box. So if you have emmet-ls configured in your languages.toml for other languages, you can exclude from your astro language-servers list.

[DreckSallow]

that works for me, thanks!

[mapsgeek]

i have everything setup and health is getting back with check marks but unfortunately it doesn't work :(

[mapsgeek]

i got it working by installing typescript in the local ~/.config/helix directory
for some reason installing with global / package manager makes the lsp fail to find files inside typescript/lib such typescript.js / tsserver.js
also installing prettier-plugin-astro locally in your project to make formatting work
`
[language-server.astro-ls]
command = "astro-ls"
args = ["--stdio"]
config = { typescript = { tsdk = "./node_modules/typescript/lib/" }}

[[language]]
name = "astro"
scope = "source.astro"
injection-regex = "astro"
file-types = ["astro"]
language-servers = ["astro-ls"]
formatter = { command = "prettier", args = ["--plugin", "prettier-plugin-astro", "--parser", "astro"] }
auto-format = true
`

this worked with me finally