IntelliJ: formatting html.eex files

@KronicDeth Can you help?

The formatter is registered for Elixir

https://github.com/KronicDeth/intellij-elixir/blob/88733a74968dd789b6809777626f8bd68a72562e/resources/META-INF/plugin.xml#L154

not EEx, so I think if it works at all, it would format the Elixir inside the EEx tags.

I’m not sure how formatting a whole file works since the outer (HTML) needs to be formatted, then the template tags (EEx) and then the inner (Elixir). IntelliJ Ultimate Edition, WebStorm, PHPStorm, and Rubymine have HTML formatters I think, so they should format the HTML, but I don’t think HTML support is in IntelliJ Community Edition.

So, maybe I need to register a formatter for EEx too, but I’m not sure how that would work since you can put the tags wherever, like to interpolate an attribute or even seemly invalid, partial HTML and that formatting would be dependent on the outer language.

Which IDEs have you tried Auto-Indent Lines in?

@KronicDeth Thanks for your reply.

I’m using IntelliJ Idea’s Ultimate Version. Trying ‘auto-intend lines’ and nothing happens on html.eex files. Can I register a formatter for EEx myself?

FWIW I use Rubymine for editing Elixir/Phoenix code. I had to add *.html.eex under eex to get it to treat those as both HTML and EEX for highlighting and Zen coding HTML. However it will not respect the Elixir blocks that span <%= %> tags for reformatting or indenting. I’ve just been applying the formatting manually. I wasn’t sure if this was just a small-IDE thing or not until I saw your post. Maybe it does need a formatter registered since, unlike .ex or .exs files, the code it separated by tags in .html.eex.

It also complains that it can’t find the definition/assignment of the assigns variables and doesn’t bold the name (@current_user, etc), but that’s just a minor inconvenience.

For the most part, the plugin is awesome. Kudos to @KronicDeth for all of the great work and being so responsive to questions.

Love the Elixir plugin so much, except for this. It’s driving me crazy that I can’t format HTML files, I’ve tried fiddling with all the options in IntelliJ and it seems to just completely ignore indenting for .html.eex files no matter what I do.

Thanks for the plugin though @KronicDeth

edit: just found the best work-around: rename the file to .html for a second, reformat it, rename it back to .html.eex

I am using PhpStorm and got it working with adding *.html.eex under the Editor > File Types > Twig. As it has a similar template language style, it works like a charm.

If anyone ever finds a better solution than the Twig file type, please please please tell me here. It’s still driving me crazy because now I basically have the option which language it’s properly formatting but not both…

The Elixir plugin was recently updated to provide better formatting (as of v11.8.0). It will now use the underlying language for eex files, meaning *.html.eex files will be formatted as HTML. Unfortunately, this still won’t format both Elixir and HTML at the same time. An example of what I mean:

<html>
<body>
<div>
  <%= if true do %>
    <p>Hallo</p>
    <% end %>
  <p>Test</p>
</div></body></html>

will be formatted as:

<html>
<body>
<div>
    <%= if true do %>
    <p>Hallo</p>
    <% end %>
    <p>Test</p>
</div>
</body>
</html>

As you can see, the content inside the if was not indented.

I’m using it with Rubymine and if you add *.html.eex and set the template language to HTML, it formats both the HTML and Elixir as you can see below. This has been my pet peeve for a while but seems to be resolved with the latest update!

Screen Shot 2020-08-06 at 1.25.58 PM962×584 58.7 KB

On your screenshot you have set the language of *.html.eex to Embedded Elixir, no?

Your highlighting seems correct (in contrast to @niknetniko’s answer). Is that Rubymine specific? Because I want that!