Vscode: indent and colorize ~H sigil

I’m using vscode. Does anyone know of any plugins that support indentation and colorization? Using ElixirLS, I only get:

Hey @CharlesIrvine , welcome!

Try phoenixframework by @msaraiva

Hey, thanks! It worked for colorization, but doesn’t do anything with indentation. Should it?

Whoops, sorry, I missed that part :slightly_smiling_face:

For formatting, install Elixir Formatter, and add/change the .formatter.exs file in your project root to this:

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

The Elixir Formatter plugin will run mix format on your project, so you will get more formatting than just the heex templates. You may need to configure the VSCode settings to format on save. The Phoenix.LiveView.HTMLFormatter plugin in .formatter.exs teaches your formatter how to handle heex. I hope this gets you going

Edit: ElixirLS can format without any additional extensions installed, but you may need to set it as the default formatter and enable the editor.formatOnSave VSCode setting

1 Like

I do not say, that I understand what is going on, but I have only

  • phoenixframework (for syntax highlighting)
  • ElixirLS (0.9.0 but says in output its 0.8.2 !?)
  • liveview 0.17

installed and formatting (.heex and ~H) works* wit this .formatter.exs

  import_deps: [:phoenix],
  inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"]

*) EDIT: not really, see below.

Praise all people working on Elixir tooling :heart_eyes:

1 Like

Yeah, you’re right, Elixir Formatter extension is not needed if you have ElixirLS. You may need to set it as the default formatter for VSCode for it to work. I was able to uninstall Elixir Formatter based on your comment. However I do think the Phoenix.LiveView.HTMLFormatter is required to get full formatting of heex, at least for me it is : )

1 Like

You’re right!
Without the plugin set: formatting works, but

  • long lines may be wrapped inside {...} which is a syntax error
  • <% ... %> blocks are not indented
  • text-nodes are not on their own line

Great improvement, thanks for the pointer.

:question: whatever happens without the plugin set…

1 Like

It works very nicely. Thanks!!

1 Like

That’s great but you should mark

as the solution.

1 Like