Can we make VSCode recognize alpine attributes as JS?

[AdrianWilczynski]

Hi.

All this extension does right now is providing .json file with Alpine's directives using Custom Data contribution point (see: https://code.visualstudio.com/api/extension-guides/custom-data-extension and https://github.com/microsoft/vscode-html-languageservice/blob/master/docs/customData.md). I'm not sure about this but it doesn't seem like there is a way to simply mark attributes as JavaScript, event handlers or something similar.

I tried following guidelines found here https://github.com/microsoft/vscode/issues/47288 - creating a virtual document and calling vscode.executeCompletionItemProvider to get completions. It seems like it could be made to work but I'm not sure if it would really end up being satisfying and useful. You'd get regular JavaScript IntelliSense but everything Alpine specific (data object for example) wouldn't be suggested by it anyway. Things like hoovers or syntax highlighting would probably also need to be reimplemented to work. The whole thing felt kinda tricky and hacky honestly and I'm not sure if I would get it right or even if it's the right way to go about this.

Maybe there are other ways to enable this but I can't think of any :(

(result of playing with vscode.executeCompletionItemProvider - proofs that it could maybe work this way 😅, nowhere near finished though)

[mokhosh]

Thanks for the thorough answer. Have you checked out how Vue or similar plugins handle this? Getting alpine specific intellisense would be awesome, but that's not my concern at the moment. I'm just curious if we can make the syntax highlighting work right now.

[AdrianWilczynski]

I'm not really sure about syntax highlighting as well 😅 but it seems like Vue & Angular extensions provide a grammar for this.

In built-in HTML grammar (C:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\html\syntaxes\html.tmLanguage.json on Windows), there are rules for event handler attributes and modifying them (regex) to also match Alpine's x-on: directives seems to make it work.

So I guess copying and tweaking them could work. I assume that new rules could be then injected into existing HTML grammar (https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#injection-grammars) by this extension.

I haven't done anything with grammar/syntax highlighting yet though. I might give it a try one day, I'd also take your PR (or you can fork) if you'd like to take a stab at it.

[tusharsadhwani]

I'd love to work on this when I find time. Alpine is an awesome project and this would just make it a lovely framework to work with.

[Sperovita]

I really wanted this, so took a pass at it alpine-syntax-highlight

First time making an extension so not sure how well it came out. I can look into incorporating it into this extension if it turns out decent.

[pcbowers]

@Sperovita I created a combined extension (alpine-intellisense) that takes some of your ideas and improves upon them by using the same TextMate grammar utilized for html event-attributes like onclick and oninput and modifying it for Alpine.js.

I also added better autocomplete since this package has gone over a year and a half without an update, and was a version behind (v2 instead of v3) the most up-to-date version of Alpine.js. It even allows you to pass the snippets to different language types if you use a templating language outside of html. Figured a combination of syntax highlighting and solid autocomplete was needed and thought you would appreciate this.