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

[bholmesdev]

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]

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]

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]

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]

Upstream issue: volarjs/services#88