Phoenix Liveview Templates - automatic formatting using Prettier

Does it also handle heex?

It does, works great! Just make sure you add the file association for .heex templates.

"files.associations": {
  "*.eex": "html-eex",
  "*.leex": "html-eex",
  "*.heex": "html-eex"
},

You can also use it for .sface. It just doesn’t reformat constructs like:

{#for item <- @list}
<h1>Item: {item}</h1>
{#else} No items {/for}

using prettier-plugin-eex has several problems in the formatting. It replaces code with <eext1 /> in many cases.
Further, it does not handle heex files well. For example <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} /> this line generates an error - because href={} is not handled correctly.
If you are using surface, far superior solution is GitHub - surface-ui/surface_formatter · GitHub.
In the upcoming elixir 1.13 release, custom formatters are supported https://github.com/elixir-lang/elixir/pull/11246 - and - we should expect a good elixir formatter that understands both HTML and elixir interpolation should arrive.

That is good to know thank you for sharing. Do you know if anyone is working on a leex/heex custom Elixir formatter for Elixir 1.13?

It’s on the roadmap:

https://github.com/phoenixframework/phoenix_live_view/issues/1506

Considering 1.13’s focus I would assume it’s probably appearing in that (or maybe LiveView can ship it externally as a mix format plugin, not sure how all that goes together).

Any word on this now that 1.13 is out? Okay I’m impatient I understand 1.13 is like out for only a few days so I’ll wait more