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

What do you use to format your .html.leex and .html.eex files? I’m using VS Code and haven’t found a beautifier I’m happy with yet.

I’d also prefer not to install a Ruby gem for it to work.

1 Like

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

3 Likes

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

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

2 Likes

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

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

2 Likes

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 :sweat_smile:

$ 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! :slight_smile:

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 :upside_down_face:

2 Likes

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!

1 Like

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

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

4 Likes

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. :scream:

It relates to this issue Prettier 2.3.0 appears incompatible with prettier-plugin-eex · Issue #51 · adamzapasnik/prettier-plugin-eex · GitHub, could be solved by downgrading prettier to npm version 2.2.1
It’s best formatter I’ve tried so far

1 Like

Hi there, also had a problem with this, now i use “HookyQR.beautify”
just to add settings.json:

"beautify.language": {
     "html": [
      "htm",
      "html",
      "html-eex"
    ]
  },
  "files.associations": {
    "*.html.eex": "html-eex",
    "*.html.leex": "html-eex",
  },
  "[html-eex]": {
  "editor.defaultFormatter": "HookyQR.beautify"
  },
1 Like