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.
cchauche
ryanjafari
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! 
0
zenw0lf
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"
},
8