Formatter for HEEx templates

there is the “phoenixframework” addin for VS-Code but it does only highlighting.

see this twitter thread https://twitter.com/josevalim/status/1437786780464463875

so basically “soon”..

I noticed that Emacs web-mode does a great job at indenting HEEx templates out of the box, but since I’m not a Emacs user, I wrapped that in a script that works a bit like Prettier would https://github.com/valeriangalliat/web-mode-indent.

web-mode somehow understands well nested code blocks with Elixir conditions, loops and so on which I found pretty impressive (it only required a quick hack to work with the <.tag></.tag> notation).

It’s only for indentation though but that a pretty good start for me instead of having no formatter at all, at least until mix format can work with HEEx files!

Another similar discussion here.

https://github.com/elixir-lang/elixir/commit/fbaf408bf69dff622ce93fbf00df3e7c440efd96

This got merged recently!

I use doom emacs, and I use the default web-mode indent. It seems to either understand the context of the heex file or ignores it, but it indents correctly without breakages.

You can use the Royal Mist Elixir Templates Formatter, and add to languages, "phoenix-hex":"html" in your VSCode settings.json like so:

"[phoenix-heex]": {
        "editor.defaultFormatter": "RoyalMist.vscode-eex-format"
    },

Ah, you should also be able to do this in the settings user interface.

Basically this formatter uses htmlbeautifier gem under the hood. That has two disadvantages - additionally ruby has to be installed. Secondly, htmlbeautifier does not understand some of the embedded tags - so formatting goes wayward in a few cases.
The inbuilt mix format that is coming in is a tool from the same ecosystem - hence probably the best solution.

htmlbeautifier does not understand some of the embedded tags - so formatting goes wayward in a few cases.

Thanks, yeah I can only agree. The wayward formatting annoys me too, especially forms I guess? It seemed the best I could find. Looking forward to the inbuilt formatter also!

GitHub - feliperenan/heex_formatter: Formatter for Phoenix Live View templates. · GitHub is out and working well with elixir 1.13
It is working well with both ~H sigil and heex files.