Vscode: indent and colorize ~H sigil

Questions / Help
,
1

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

Screen Shot 2022-06-17 at 7.15.53 AM
Screen Shot 2022-06-17 at 7.15.53 AM839×332 21.4 KB

2

Hey @CharlesIrvine , welcome!

Try phoenixframework by @msaraiva

3

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

4

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
5

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
6

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
7

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
8

It works very nicely. Thanks!!

1 Like
9

That’s great but you should mark

as the solution.

1 Like