How can I start using the new Heex formatter in VS Code?

Questions / Help
,
1

I’ve been fighting a little bit of a battle with my formatters in vs code. I’m not even sure what is formatting my heex at the moment, but I’m left with blocks looking like:

    <div class="mb-2">
      <%= label f, :description, class: "block font-semibold mb-1 text-slate-500" %>
        <%= text_input f, :description, class: "w-full text-input" %>
          <%= error_tag f, :description %>
    </div>

How can I take advantage of the new formatter that @chrismccord mentioned in his talk at the recent elixir conference? I’m not a regular user of vs code and the settings are often quite confusing to me.

2

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”.

1 Like
3

@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

2 Likes