@elt547 you might want to install heex formatter:

For LiveView 0.18: Phoenix.LiveView.HTMLFormatter — Phoenix LiveView v0.18.3

Here are some general tips for setting up vscode

And if auto formatter doesn’t kick in I’ve setup q hack for myself using a extension from vscode that I think is called “run on save” but liveview 0.18 might not need it, I haven’t tested it yet

Hopefully one of those tips might help

I am not sure that this is what you are looking for, but the following formatting works for me fine.

The relevant parts for settings.json are:

"editor.formatOnSave": true,
"[elixir]": {
    "editor.defaultFormatter": "animus-coop.vscode-elixir-mix-formatter"
  },
  "[phoenix-heex]": {
    "editor.defaultFormatter": "JakeBecker.elixir-ls"
  },
"files.associations": {
    "*.heex": "phoenix-heex"
  },

and for my .formatter.exs:

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

The relevant plugins I have installed are “ElixirLS: Elixir support and debugger”, “Phoenix Framework”. “Elixir Mix Formatter” and “Heex HTML”.