Formatter for HEEx templates

Ay! Thanks for clarification!

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

@valerian could you share how did you make web-mode understand <.tag> as a tag.
I’ve changed the web-mode-tag-regexp and web-mode-start-tag-regexp but this does not seem to work…

If you’re looking for a sorter, I’ve made one that integrates with mix format which may be of interest to you

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>

Thanks!

Did you manage to get Tailwind Prettier integration working?

Exactly what I was looking for; thank you!

Here’s my setup which seems to be working nicely.

Suggested tweaks welcome!

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 
],

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.