Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bholmesdev opened this issue Nov 15, 2023 · 5 comments
Open

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

bholmesdev opened this issue Nov 15, 2023 · 5 comments
Labels
- P2: has workaround Bug, but has workaround (priority) ecosystem: upstream Issue is caused by a bug / missing feature upstream

Comments

@bholmesdev
Copy link

bholmesdev commented Nov 15, 2023

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.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Nov 15, 2023
@bholmesdev bholmesdev changed the title 🐛 BUG: VS Code extensions targeting .html files (ex. Alpine) don't work in .astro files 🐛 BUG: Alpine intellisense does not work in .astro files Nov 15, 2023
@Princesseuh Princesseuh added - P2: has workaround Bug, but has workaround (priority) and removed needs triage Issue needs to be triaged labels Nov 15, 2023
@Princesseuh
Copy link
Member

Princesseuh commented Nov 15, 2023

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
Copy link

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
Copy link
Member

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
Copy link
Member

Upstream issue: volarjs/services#88

@Princesseuh
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P2: has workaround Bug, but has workaround (priority) ecosystem: upstream Issue is caused by a bug / missing feature upstream
Projects
None yet
Development

No branches or pull requests

3 participants