search

withastro / language-tools

Language tools for Astro
MIT License
270 stars 54 forks source link

🐛 BUG: Alpine intellisense does not work in `.astro` files #700

Open bholmesdev opened 1 year ago

bholmesdev commented 1 year ago

Describe the Bug

I tried out the Alpine extensions for syntax highlighting and intellisense, and found neither seem to work in .astro files; only .html. It sounds like VS Code has a customData format we need to adhere to according to @Princesseuh.

To quote the README:

This extension aims to keep as small a footprint as possible by injecting a simple grammar to provide JavaScript highlighting rather than implementing an entirely new language and by using the Custom Data Extension to add custom HTML attributes.

Steps to Reproduce

  1. Install the Alpine intellisense extension
  2. Visit a .html file. Note that typing an example like <p x- pulls up intellisense.
  3. Do the same in .astro file. Note intellisense options do not appear.
Princesseuh commented 1 year ago

This happens because currently we don't collect the contributed customData of other extensions, like the HTML language server does.

In the meantime, you can manually specify the paths to the custom data in html.customData in your config, like such:

  "html.customData": [
    "/Users/erika/.vscode/extensions/adrianwilczynski.alpine-js-intellisense-1.2.0/customData/html.json"
  ],

As for the syntax highlighting, the extension linked needs to inject into the Astro syntax: https://github.com/Sperovita/alpinejs-syntax-highlight/blob/2cf4f66f264dabeb218bb28128c2844aceb4a4a9/syntaxes/injection.json#L3

kfalkiewicz commented 11 months ago

Hmm workaround is problematic, when you use 1 setup for different project types. It would be super cool to make this extension just work out of the box, without any hacky solutions.

Princesseuh commented 11 months ago

Hmm workaround is problematic, when you use 1 setup for different project types. It would be super cool to make this extension just work out of the box, without any hacky solutions.

You can put that setting in the project's config.

Princesseuh commented 8 months ago

Upstream issue: https://github.com/volarjs/services/issues/88

Princesseuh commented 2 months ago

If anyone is interested in implementing this, Johnson's Volar port of the VS Code HTML language server would be a good reference: https://github.com/microsoft/vscode/pull/171547