Formatter for HEEx templates

Hello folks! Are there any libraries for formatting of HEEx templates?

1 Like

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”…

7 Likes

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!

1 Like

Another similar discussion here.

1 Like

This got merged recently!

1 Like

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.

2 Likes

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!

1 Like