Heex HTML syntax highlighting embedded with Alpine JS and Phx variables with new HEEX syntax

Released my first version of VSCode extension for Syntax highlighting within Heex templates for embedded Alpine JS and PHX out of the box.

Need some good reviews and feedback about this , It solves the problem of using embedded syntaxes for Alpine and PHX within Heex templates leads to a gibberish HTML hard to debug and format.

Contribute to the repo and make it better !

#phoenix #heex

1 Like

Hi, first and foremost, thanks for this!
We really need better tooling for VSCode around Heex templates. :slight_smile:

I couldn’t make it work at all, though.
No formatting or syntax highlighting, I’m using this too (Phoenix Framework - Visual Studio Marketplace) and even disabled to see if they were conflicting.

Regarding that official plugin, wouldn’t it be a better idea to contribute to that plugin instead of creating a separate one?

1 Like

Very cool project @Ritvyk! One question though: Could you explain how is your extension different from the official one in terms of functionality? It seems to me that the Alpine support is one of the main differences, but I can’t see if that’s just it.

Like @greven said, perhaps contributing to the official plugin would be a better idea. Also, if Alpine support is that important to you, maybe rename the extension and try to expand on top of the official one by supporting those custom directives (it’ll certainly be easier to maintain).

1 Like

@greven Hey thanks for your feedbacks , but the reason I want to create this seperate code extension is to add more power to HEEX templates , yes I can contribute to a existing project but it’s always good to have alternatives :smiley:

The reason it didn’t work , could be your theme some themes doesn’t really support elixir syntax , try installing

“Monokai Dimmed” or any Monokai theme and let me know.

@thiagomajesk I am planning a roadmap soon going to be published in the repo , I want majorly add extensive support for HEEX templates.

For example

<.component >

</. component>

Should be considered a valid HTML tag ( in .HTML.heex) files , and it should have conventional Vscode functionalities like

  1. Folding code
  2. Detecting errors
  3. Validation of attributes (assigns) being used