Support HEEx and ~H sigil.

[odk211]

Phoenix Framework introduce HEEx new template engine.
https://github.com/phoenixframework/phoenix_live_view/blob/master/CHANGELOG.md#new-html-engine

It's really great that intellij elixir support it!
Currently it is a String.

[mike1o1]

I've had good luck by associating heex files as Embedded Elixir.

Preferences -> Editor -> File Types, then find "Embedded Elixir file", clicking "+" and adding *.heex.

[kurtome]

I've had good luck by associating heex files as Embedded Elixir.

This works alright, but doesn't help with the new attribute syntax:

<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>

[benkeil]

Do you have autocompletion for HTML, JavaScript or Tailwind in *.heex files?

[user1007017]

Do you have autocompletion for HTML, JavaScript or Tailwind in *.heex files?

I managed to activate autocompletion for *.html.heex files altough it doesn't recocgnize the elixir code in it

[codylandry]

Just giving this a friendly bump. Syntax highlighing works in *.(h|l)eex files, but not in ~H, ~L strings. I think the IDE is not interpreting these as strings since using # language=html does not work either. Not saying they should, just an observation.

Example:

I'd love to help, but I don't know java or how to write parsers, though I'm reading up on it now!

[KronicDeth]

I'm finally on a client project that uses HEEx, so I have good test sources.

I can not emphasize enough that if y'all would just let me sign NDAs to access your actual code I could development features a lot faster as I need example projects to continually develop against.

[kurtome]

@KronicDeth , I just made this repo public if it helps: https://github.com/kurtome/tefla

It's a side project that I'm probably never going to do anything with 😂

[odk211]

Example code is https://github.com/livebook-dev/livebook. It uses HEEx a lot.

[ghenry]

Looking forward to seeing this! (@suretec)

[KronicDeth]

From Yann Cébron on JetBrains Platform Slack:

this is HTML based template language?

https://plugins.jetbrains.com/docs/intellij/api-notable-list-2020.html#intellij-platform-20203 Extensible HTML Lexer/Parser

https://blog.jetbrains.com/webstorm/2022/03/building-a-plugin-for-webstorm-part-3/ might be related AFAIU

or angular2 as reference https://github.com/JetBrains/intellij-plugins

[knoebber]

I would love this!

[guessthepw]

Any update on getting ~H syntax highlighting working? Only thing stopping me from making the switch from vscode.

[MichaelHipp]

Would really like to see a full set of features to support development in Phoenix LiveView.

[kurtome]

I wonder if anyone on the Phoenix core team would help with this, I know they have invested a lot in heex tooling and incorporating it in the the core formatter etc. cc @chrismccord

I think generally the IntelliJ ecosystem for Elixir/Phoenix isn't as well supported as VSCode which is too bad since IntelliJ is such a great IDE.

[bopm]

@KronicDeth can we get any update on this issue? Do you need help? Do you have plans for this one? Any roadmap?

[KronicDeth]

I’m working on 14.0.1 which is a bug fixes only release. Yes, help is always appreciated. There is no roadmap for anything ever. I work on the plugin as I have free time on DockYard Fridays.

[bopm]

Jfyi I sent this message to Brian Cardarella because I know how not having enough time for a project can affect things.

[StragaSevera]

Sadly, the highlighting does not work correctly even in the *.heex-files - when I set up the extension as an Embedded Elixir File with the template data language being HTML, I receive:

It would be a great step to just being able to use *.heex files =-)

[thacoon]

Having the same issue as @StragaSevera, see (app.html.heex) and using IntelliJ IDEA Ultimate on ArchLinux:

I configured my file type associations as suggested:

Does anyone has found a fix or workaround for this?

[Trevoke]

I'm going to add a friendly request here to the universe so that it decides to inspire you to work on this on an upcoming DockYard Friday.

[Ridtt]

I've learned to get along with all the weaknesses of the plugin for over 1 year now and find it quite handy. Now I want to try liveview and I really need these highlighting features 👍

[trashhalo]

I was thinking a good place to start to figure out how to do mixed syntax highlighting would be to find an open source plugin that already solved this problem for their parser and copy paste tweak your way to victory.

The mdx plugin has already solved this since mdx is a mixture of javascript and markdown syntax trees. Digging around their codebase I find the hook into detecting jsx content here https://github.com/JetBrains/intellij-plugins/blob/a9713ee928bc5df60bdc39ead79557b552a61d9a/mdx/src/main/kotlin/org/intellij/plugin/mdx/lang/parse/MdxHighlightingLexerBase.kt#L62

And you can see from the plugin page https://plugins.jetbrains.com/plugin/14944-mdx that syntax highlighting is indeed working in the javascript section.

I dont know enough about intellij or java/kotlin to solve this but I hope this hint gives someone a good starting place. 🙏

[JensvandeWiel]

I have some background in intellij plugins, nut much but ill take a look at this.

[trashhalo]

Should we consider setting up a bounty system for this plugin? Jetbrains doesn't want to maintain this and some of us have access to discretionary spending at our jobs.

[ghenry]

I haven't had it working for a while now and need it for work, so yes please.

[allenwyma]

hi @joshuataylor if this can happen once you get the update for latest IDE out, that'd be great! this is stopping me from using this plugin full time.

[joshuataylor]

yeah, now heex is here to stay it'll be worthwhile investing time for highlighting, 100% agreed.

[szymon-jez]

Sadly, the highlighting does not work correctly even in the *.heex-files - when I set up the extension as an Embedded Elixir File with the template data language being HTML, I receive: ![]
It would be a great step to just being able to use *.heex files =-)

I have recently by accident found a fix/workaround:

1. Open a .html.heex file,
2. right click on its tab and select "Change ... template data language to..." [1].
3. In the window that will pop up select "HtmlCompatible" as the "Project Language", delete the opened file from the list below and click "OK" [2].

After doing this the syntax highlighting works for me without any issue for the HTML and Elixir code. Hope this will also do the trick for others.

If more people find this working this could be considered a fix for 50% of this Github issue. Well at least a temporary one till there is something that would not require doing the above configuration (but maybe it is the IDEA way... and just the way it should be?). Anyway this should be then documented and maybe this issue closed as it is 2 in one – the sigil part looks distinct and deserving it's one issue.

PS. Having the ~H sigil support would be currently the nicest thing to get 🎁 in my IDE.

[1]

[2]

[DnOberon]

I'm in the same boat. Unfortunately I'm using Zed until we get some support :(

[jbe-codeup]

Please? :) this is the only block for me to make a full switch from cursor..