Little late to this post, but it’s now part of the phoenix_live_view library, so it’s easier to setup in a existing Phoenix project. the heex formatter can be configured with the mix format task with the following config in the .formatter.exs file:
plugins: [Phoenix.LiveView.HTMLFormatter],
inputs: [
"*.{heex,ex,exs}", # <- include heex here
"priv/*/seeds.exs",
"{config,lib,test}/**/*.{heex,ex,exs}" # <- include heex here
],
It seems to be pretty much impossible atm. I’ve tried GitHub - adamzapasnik/prettier-plugin-eex: Prettier EEX plugin · GitHub and it blew up on slots.
npx prettier --config .prettierrc.js sample.html.heex --tailwind-config=tailwind.config.js
sample.html.heex [error] sample.html.heex: SyntaxError: Unexpected closing tag "icon". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (81:21)
[error] 79 | <:icon>
[error] 80 | <MVIcons.x />
[error] > 81 | </:icon>
[error] | ^^^^^^^^
[error] 82 | <:text>
[error] 83 | CANCEL
[error] 84 | </:text>
If you’re looking for a sorter, I’ve made one that integrates with mix format which may be of interest to you 
In my case I didn’t need web-mode to understand them, I just cared about them being formatted by my CLI wrapper, so the hack was to replace the dot by some unique string, feeding that to web-mode for formatting, then replacing the unique string by a dot again 
