VS Code formatter for .html.leex and .html.eex files?

The general consensus I’ve gotten from others is that currently nothing works well and everyone is hand formatting them.

I have found a fresh project tackling formatting for html.eex files via a Prettier plugin:

• Adam Zapaśnik on X: "Alright, it's available, prettier eex plugin. Give it a try, please. @akoutmos @elixir_radar @elixirweekly @elixirphoenix https://t.co/IJtMvRvT6i #myelixirstatus" / X
• GitHub - adamzapasnik/prettier_eex_formatter: Escript used by prettier-plugin-eex to format multiline eex expressions · GitHub
• GitHub - adamzapasnik/prettier-plugin-eex: Prettier EEX plugin · GitHub

Not sure how solid this library is, though. Maybe worth exploring.

I hope it’s solid enough
I think the only major problem right now is this:

https://github.com/adamzapasnik/prettier-plugin-eex/issues/6

But it should be solved by the end of this weekend. (I have a semi working solution atm)

Nice! Thanks for providing ideas for this topic, currently there is not much alternatives.
The installation instructions are a bit involved at the moment and the amount of TODO comments is a bit scary

$ ag TODO
prettier-plugin-eex/lib/html_parser/encoder.js
47:          // TODO: added space
134:    // TODO: better error wording?

prettier-plugin-eex/lib/html_parser/decoder.js
151:          // TODO: show an example

prettier-plugin-eex/lib/html_parser/decoder/table_and_head_decoder.js
6:      // TODO: change name
34:      // TODO: change name

prettier-plugin-eex/lib/html_parser/decoder/html_body_decoder.js
56:  // TODO: validate if it's needed!

prettier-plugin-eex/lib/index.js
30:      // TODO: ADD mjml?

prettier-plugin-eex/lib/eex/formatter.js
5:// TODO: add formatting option to format multiline by urself
6:// TODO: better naming please

prettier-plugin-eex/lib/eex/tokenizer.js
55:      (html.endsWith('/>') || // TODO: FIX THIS

I need to play with it on a bigger project and see how well it copes with real world markup. Anyways, I hope you get yourself more beta-users and they will help to improve your library!

Hi, I wrote and use YAB for eex/leex - Visual Studio Marketplace

Maybe you want to give it a try and send feedback. For me it works good enough.

Oh, I have missed your point, not to install a ruby gem

Nice, it worked quite OK for the couple files that I have thrown at it. It does not handle embedded markup in Liveviews, like:

  def render(assigns) do
    ~L"""
    <div class="container">
      <h3>Counter for <%= @current %> </h3>
    </div>
    """
  end

I can image that this would be tricky to support, though.

Thanks for posting it, it was completely under my radar!

thank you! I was working with intellij and just switched to vscode as this was making me mad. I don’t even have OCD

Thanks for this, its pretty good but it doesn’t indent inputs_for

ex:

<%= inputs_for f, :config, fn fc -> %>
<%= label fc, :devise_secret_key, "Devise Secret Key" %>
<%= text_input fc, :devise_secret_key, phx_debounce: 600 %>
<%= error_tag fc, :devise_secret_key %>
<% end %>

So far this (prettier-plugin-eex) is the one that works the best.

I’m using it with vscode using Run on Save - Visual Studio Marketplace

  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "\\.l?eex$",
        "cmd": "prettier --write ${file}"
      },
    ]
  },

Thank you for this

I followed the readme til the end and format on save started to work with just the regular Prettier extension. Unfortunately it changed every line of <% code... %> into <eext1> so don’t forget to commit your work before trying the eex plugin.