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

Suggested tweaks welcome!

Thanks for the guide.
I do not quite understand how to find the language ID and how to connect plugins to them.
It’s working for those you posted but I’d like to use some more plugins.

Here is a list of the plugins and the state of affairs:

How can we put a + in each cell?

@malloryerik ncase you want the same ability with pure .HTML.heex files , take a look at this extension just came into marketplace.

It also takes alpine js x-* and phx and new <.component> syntax into consideration

An update here:

I am on {:phoenix_live_view, "~> 0.17.10"} and the following works to format .heex (as well as .ex, .exs) using mix format:

# .formatter.exs
[
  plugins: [Phoenix.LiveView.HTMLFormatter],
  inputs: ["*.{heex,ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{heex,ex,exs}"],
  import_deps: [:ecto, :phoenix],
  subdirectories: ["priv/*/migrations"]
]

Appears that the work has been merged in.

I use Elixir Mix Formatter to trigger mix format on save in VSCode with editor.formatOnSave: true in settings.json. Also:

// settings.json
"[elixir]": {
  "editor.defaultFormatter": "animus-coop.vscode-elixir-mix-formatter",
},
"[phoenix-heex]": {
  "editor.defaultFormatter": "animus-coop.vscode-elixir-mix-formatter"
}

…to ensure the right formatter extension is used for these files.

Have fun!

Thanks a lot, you really saved me a lot of time searching and figuring out.