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.
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.
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:
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:
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.
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
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"
},