Heex formatter - a Formatter for Heex templates

Phoenix Forum Questions / Help
, ,
23

Thanks for the update and good job!

I guess it’s not recommended to use it anymore, right?

Any documentation on how to make it work from Phoenix, or it’ll be automatically added in the boilerplate for new projects in the next version, maybe?

1 Like
24

Congratulations @feliperenan !!! That is a big achievement.

3 Likes
25

Here is how you setup it.

You need to either LV master or wait for a new release though.

5 Likes
26

Found this thread on elixirforum.com after about an hour of googling.

Hope this helps people: Skipping formatter plugin Phoenix.LiveView.HTMLFormatter because module cannot be found · Issue #1910 · phoenixframework/phoenix_live_view · GitHub

2 Likes
27

Can this be set up in VS Code to have automatic formatting after saving a file?

The ElixirLS extension does this for .ex files but I can’t seem to get it working for HEEx.

1 Like
28

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.

1 Like
29

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.

1 Like
30

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.

31

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

3 Likes
32

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

33

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

1 Like
34

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.

2 Likes
35

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! :grinning:

36

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" 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 Likes
37

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

2 Likes