Add Astro Support

[alvgaona]

Attempt to add @astrojs/language-server and virchau13/tree-sitter-astro.

[alvgaona]

SCM files are left to be added.

[Princesseuh]

Hey, maintainer of the Astro language server here, you'll need to pass a path to a TypeScript install's typescript.js as an init param, see https://github.com/withastro/language-tools/blob/main/packages%2Fvscode%2Fsrc%2Fclient.ts#L60-L62

Let me know if there's any way I can assist, been liking Zed a fair amount recently 🫡

[alvgaona]

In spite of adding the queries, typescript, tsx, and css are not getting highlighted; only html 🤔 What am I missing here?

From the tree-sitter-astro repo:

And these are defined in the Cargo.toml

• zed/Cargo.toml

  Line 139 in 4fc0116

  tree-sitter-css = { git = "https://github.com/tree-sitter/tree-sitter-css", rev = "769203d0f9abe1a9a691ac2b9fe4bb4397a73c51" }

• zed/Cargo.toml

  Line 153 in 4fc0116

  tree-sitter-typescript = { git = "https://github.com/tree-sitter/tree-sitter-typescript", rev = "5d20856f34315b068c41edaee2ac8a100081d259" }

[alvgaona]

Ok, now the highlighting works for the frontmatter and interpolations. For some reason, CSS ain't behaving like any other .css or .html file.

Diff

[Princesseuh]

Can't really speak to the syntax highlighting and tree sitter issues, but the Astro LSP part looks great to me!

I'd suggest holding on for now because it's a bit buggy, but in the future, it should probably also install the Astro TypeScript plugin, for .astro imports inside .ts(x) files and cross-file moves / renames and stuff.

[alvgaona]

From this comment, I think there's an issue with CSS highlighting within the <style> tag.

[Princesseuh]

From this comment, I think there's an issue with CSS highlighting within the <style> tag.

That was before Astro had its own treesitter plugin! The TSX treesitter plugin of course cannot highlight CSS (or script tags, for that matter), hence why there's an Astro specific plugin.

[alvgaona]

From this comment, I think there's an issue with CSS highlighting within the <style> tag.

That was before Astro had its own treesitter plugin! The TSX treesitter plugin of course cannot highlight CSS (or script tags, for that matter), hence why there's an Astro specific plugin.

Oh, got it. Misinterpreted the message.

[alvgaona]

Can't really speak to the syntax highlighting and tree sitter issues, but the Astro LSP part looks great to me!

I'd suggest holding on for now because it's a bit buggy, but in the future, it should probably also install the Astro TypeScript plugin, for .astro imports inside .ts(x) files and cross-file moves / renames and stuff.

@Princesseuh when you say a bit buggy, do you mean that it's not suggesting autocompletion at all? I'm not getting HTML tag suggestions from the language server. In VScode same thing happens, and I think I have configured correctly.

[virchau13]

@alvgaona You appear to be using the wrong tree-sitter injections; the ones in the tree-sitter-astro repository are outdated. (I should really update those...)

https://github.com/nvim-treesitter/nvim-treesitter/blob/e24dab6696aa2a6682a117e241adc32c38e93d53/queries/astro/injections.scm has the up-to-date injections.

[Princesseuh]

Can't really speak to the syntax highlighting and tree sitter issues, but the Astro LSP part looks great to me!

I'd suggest holding on for now because it's a bit buggy, but in the future, it should probably also install the Astro TypeScript plugin, for .astro imports inside .ts(x) files and cross-file moves / renames and stuff.

@Princesseuh when you say a bit buggy, do you mean that it's not suggesting autocompletion at all? I'm not getting HTML tag suggestions from the language server. In VScode same thing happens, and I think I have configured correctly.

I'm only talking about the TypeScript plugin in that message, which only works in .ts files and does not do any completions in anything, it allows .ts files to understand .astro files.

Completions for HTML tags should work, though if something doesn't work in VS Code, it's totally normal if it doesn't work in Zed (though it might be an issue)

[alvgaona]

@alvgaona You appear to be using the wrong tree-sitter injections; the ones in the tree-sitter-astro repository are outdated. (I should really update those...)

https://github.com/nvim-treesitter/nvim-treesitter/blob/e24dab6696aa2a6682a117e241adc32c38e93d53/queries/astro/injections.scm has the up-to-date injections.

@virchau13 for some reason, those injections aren't working either. I'll keep looking into it.

[Princesseuh]

Tried this locally and it works pretty nicely, awesome work! With Zed's UI being otherwise so fast, it really highlights the performance issue the Astro language server can sometimes have in some contexts, but that's definitely not your fault (it's mine, ha)

[alvgaona]

Tried this locally and it works pretty nicely, awesome work! With Zed's UI being otherwise so fast, it really highlights the performance issue the Astro language server can sometimes have in some contexts, but that's definitely not your fault (it's mine, ha)

Beautiful. Glad you tried it!

[alvgaona]

@virchau13 I installed nvim-treesitter and enabled astro in the configuration. CSS isn't getting highlighted either; same behavior as in Zed.

EDIT: this was cause due to missing CSS and SCSS parsers in neovim. Dismiss the message.

[virchau13]

@alvgaona You may be missing the css parser dependency. Try following https://github.com/virchau13/tree-sitter-astro#troubleshooting.

[alvgaona]

@alvgaona You may be missing the css parser dependency. Try following https://github.com/virchau13/tree-sitter-astro#troubleshooting.

You're so right. In nvim works when I install the css and scss parsers. 😮‍💨

[maxbrunsfeld]

This is looking good. I left a few questions.

[alvgaona]

Added the file icon for Astro. Does the size look ok to y'all?

[alvgaona]

@alvgaona You may be missing the css parser dependency. Try following https://github.com/virchau13/tree-sitter-astro#troubleshooting.

You're so right. In nvim works when I install the css and scss parsers. 😮‍💨

However, tried several injections for CSS in Zed and none is kicking in for Astro files. I don't understand the difference between Svelte, HTML and Vue injections, TBH 💢

[iamnbutler]

Thanks for working on this! I spent a bit of time to redraw the Astro icon to closer align with the rest of our file icons.

I've just started picking up Astro and it seems really cool – I'll see if there are any other refinements I can help out with.

[maxbrunsfeld]

Thanks for making those adjustments @alvgaona. And that icon looks sweet @iamnbutler.

This will ship in Zed 0.123.

[alvgaona]

Thanks for working on this! I spent a bit of time to redraw the Astro icon to closer align with the rest of our file icons.

I've just started picking up Astro and it seems really cool – I'll see if there are any other refinements I can help out with.

Thanks a lot! Looks awesome now.

[romu70]

Hi. Is this already available in zed?

[bennetbo]

Hi. Is this already available in zed?

@romu70 Looks like it is in Zed Preview v0.123.1 (and will probably land in stable next Wednesday)
Release notes & Download

[ajguyot]

Thanks so much for all of this work! Just tried this out in the preview and highlighting is working great, Astro files are finally usable in Zed 🎉

Not sure if this is the place to ask, but are completions planned for this as well? Would be awesome to get code completion within each area of the Astro files.

[Princesseuh]

Thanks so much for all of this work! Just tried this out in the preview and highlighting is working great, Astro files are finally usable in Zed 🎉

Not sure if this is the place to ask, but are completions planned for this as well? Would be awesome to get code completion within each area of the Astro files.

Completions should normally already work, as this also includes the Astro language server

[BryanSchuetz]

Running 0.123.1 /.2 I don't seem to get completions in .astro file. I get the syntax highlighting—which is great. I've also noticed that typescript warnings and errors that show up in .astro files in VSCode with the astro extension don't show up in .astro files in Zed. Have I missed a config step somewhere? Or should it be enough to just be running this pre-release?

[jakob-fiegerl]

Currently running 0.128.3. Got the same issue as @BryanSchuetz
Is there any plan for autocompletion in .astro files?

[BryanSchuetz]

See this issue for more: #8186