zed icon indicating copy to clipboard operation
zed copied to clipboard

Add Astro Support

Open alvgaona opened this issue 1 year ago • 14 comments

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

alvgaona avatar Jan 27 '24 21:01 alvgaona

SCM files are left to be added.

alvgaona avatar Jan 27 '24 21:01 alvgaona

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 🫡

Princesseuh avatar Jan 28 '24 07:01 Princesseuh

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

Screenshot 2024-01-28T18 01 29@2x

From the tree-sitter-astro repo:

Screenshot 2024-01-28T17 40 48

And these are defined in the Cargo.toml

  • https://github.com/zed-industries/zed/blob/4fc01163daf0ae20fe8a46202dc088a5b743111d/Cargo.toml#L139
  • https://github.com/zed-industries/zed/blob/4fc01163daf0ae20fe8a46202dc088a5b743111d/Cargo.toml#L153

alvgaona avatar Jan 28 '24 17:01 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.

Screenshot 2024-01-28T18 41 06

Diff

Screenshot 2024-01-28T18 39 41

alvgaona avatar Jan 28 '24 18:01 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 avatar Jan 29 '24 16:01 Princesseuh

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

alvgaona avatar Jan 29 '24 20:01 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.

Princesseuh avatar Jan 29 '24 20:01 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.

Oh, got it. Misinterpreted the message.

alvgaona avatar Jan 29 '24 20:01 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.

alvgaona avatar Jan 29 '24 23:01 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 avatar Jan 30 '24 00:01 virchau13

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)

Princesseuh avatar Jan 30 '24 02:01 Princesseuh

@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.

alvgaona avatar Feb 01 '24 02:02 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)

Princesseuh avatar Feb 05 '24 11:02 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)

Beautiful. Glad you tried it!

alvgaona avatar Feb 05 '24 12:02 alvgaona

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

Screenshot 2024-02-08T18 23 12

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

alvgaona avatar Feb 08 '24 18:02 alvgaona

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

virchau13 avatar Feb 09 '24 02:02 virchau13

@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. 😮‍💨

alvgaona avatar Feb 09 '24 03:02 alvgaona

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

Screenshot 2024-02-11T00 43 16@2x

alvgaona avatar Feb 11 '24 00:02 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 💢

alvgaona avatar Feb 11 '24 00:02 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.

CleanShot 2024-02-12 at 12 34 03@2x

iamnbutler avatar Feb 12 '24 17:02 iamnbutler

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

This will ship in Zed 0.123.

maxbrunsfeld avatar Feb 12 '24 18:02 maxbrunsfeld

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.

CleanShot 2024-02-12 at 12 34 03@2x

Thanks a lot! Looks awesome now.

alvgaona avatar Feb 12 '24 19:02 alvgaona

Hi. Is this already available in zed?

romu70 avatar Feb 15 '24 11:02 romu70

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

bennetbo avatar Feb 15 '24 11:02 bennetbo

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.

ajguyot avatar Feb 17 '24 05:02 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.

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

Princesseuh avatar Feb 17 '24 07:02 Princesseuh

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?

BryanSchuetz avatar Feb 20 '24 10:02 BryanSchuetz

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

jakob-fiegerl avatar Mar 28 '24 23:03 jakob-fiegerl

See this issue for more: #8186

BryanSchuetz avatar Mar 29 '24 15:03 BryanSchuetz