Heex formatter - a Formatter for Heex templates

Yep I can confirm that is my setup as well. Thanks Víctor.

Seems like today the only thing you need is GitHub - elixir-lsp/elixir-ls: A frontend-independent IDE "smartness" server for Elixir. Implements the "Language Server Protocol" standard and provides debugger support via the "Debug Adapter Protocol" · GitHub and edit your .formatter.exs to:

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

As for VSCode settings.json:

  "[phoenix-heex]": {
    "editor.defaultFormatter": "JakeBecker.elixir-ls",
    "editor.formatOnSave": true
  },

If you want to be able to use Emmet in you .heex files, add this to settings.json:

  "emmet.includeLanguages": {
    "html-eex": "html",
    "phoenix-heex": "html"
  },

Thanks! Your recommendation is what I went with after trying all the options in this thread. Elixir Mix Formatter for VSCode uses mix format for my .heex and .ex, .exs. The key pieces of config seem to be:

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

…in VSCode settings.json and…

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

in .formatter.exs.

I also setup the pre-commit git hook for mix format recommended by @jaimeiniesta. You can manage that hook and share it with your teammates in version control by creating a .githooks folder at the project root and git config core.hooksPath .githooks. To ensure everyone formats!

Wanted to update folks on a solution that worked for me to get VSCode to automatically format my HEEX code. I was able to use an extension called Elixir Mix Formatter and then set that as the default formatter for my elixir and heex files. I am now getting automatic formatting on save as well as the option to save without formatting.

Thanks, will try that extension.

Buy now I’ve added a pre-commit git hook so I don’t forget to run mix format, like this elixir-mix-format-pre-commit-hook/pre-commit at master · paulanthonywilson/elixir-mix-format-pre-commit-hook · GitHub

Thanks, I also saw that there’s an open issue in the ElixirLS extension: Formatting on save does not work with heex files. · Issue #242 · elixir-lsp/vscode-elixir-ls · GitHub

Ok. One more thing.
The formatter should not remove comments <%# TODO: xxx %>.

I just tried the formatter. Do we really need to format <br> → <br />.

PS: Other than that it’s great. And the thing thing the <br> is also nitpicking.

I use the runonsave extension like described here: Heex formatter - a Formatter for Heex templates - #18 by cvkmohan

The downside is that then “save without formatting” isn’t possible.

Changes to visual studio code may be required, because they don’t call the mix format command directly but rather one of its functions. All the relevant information should be returned by our APIs.