Hi people 
We have been working on a Formatter to format Heex templates. The idea is to have a similar experience as we do when formatting Elixir code :).
Please, we’d love if you try it out and let us know any feedback you have. In the repo, you can find the instructions on how to install and use it and, here you can see how it is supposed to format.
Here is the Repo link: GitHub - feliperenan/heex_formatter: Formatter for Phoenix Live View templates.
Thank you
Welcome @feliperenan !!!
I have been very vocal about this library here already. Formatter for HEEx templates - #12 by cvkmohan
Friends, this library made my vscode setup leaner ( I was using beautify and more extensions earlier.) and @feliperenan has been very responsive to attend to my queries. A big applause.
Im testing this in a new phoenix app and when I try
mix format lib/test_crm_web/live/customer_live/index.html.heex
I get the error:
lib/test_crm_web/live/customer_live/index.html.heex:1:1: syntax error before: '<'
I have done nothing else than generated a live resource. Is there anything I missed?
What is your Elixir and Phoenix.LiveView versions? Do you also have a full stacktrace? I am wondering if it is trying to run the Elixir formatter on that .heex file.
I was trying to run it on that heex file.
LiveView 0.17.6
Elixir 1.12.1
mix format failed for file: lib/test_crm_web/live/customer_live/index.html.heex
** (SyntaxError) lib/test_crm_web/live/customer_live/index.html.heex:1:1: syntax error before: '<'
(elixir 1.12.1) lib/code.ex:978: Code.format_string!/2
(mix 1.12.1) lib/mix/tasks/format.ex:418: Mix.Tasks.Format.format_file/2
(elixir 1.12.1) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
(elixir 1.12.1) lib/task/supervised.ex:35: Task.Supervised.reply/5
(stdlib 3.13.2) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
You need at least Elixir v1.13! You should even get a warning printed by using an earlier version. 
I’m not sure if that works on Elixir 1.12 since format plugins are a thing only after Elixir 1.13. Please, try to update your Elixir and let us know If you have any other issues, it would be nice if you could share the template you are trying to format in case you are still facing issues 
.
All good. It works after updating elixir version.
Seems to depend on LiveViews master, instead of a versioned release? Or is this my configuration at fault?
#mix.exs
{:phoenix_live_view, "~> 0.17"},
{:heex_formatter, github: "feliperenan/heex_formatter", only: [:dev]}
λ mix deps.get
* Getting heex_formatter (https://github.com/feliperenan/heex_formatter.git)
remote: Enumerating objects: 492, done.
remote: Counting objects: 100% (492/492), done.
remote: Compressing objects: 100% (254/254), done.
remote: Total 492 (delta 207), reused 485 (delta 200), pack-reused 0
origin/HEAD set to main
Dependencies have diverged:
* phoenix_live_view (Hex package)
the dependency phoenix_live_view in mix.exs is overriding a child dependency:
> In mix.exs:
{:phoenix_live_view, "~> 0.17", [env: :prod, repo: "hexpm", hex: "phoenix_live_view"]}
> In deps/heex_formatter/mix.exs:
{:phoenix_live_view, [only: [:dev], env: :prod, git: "https://github.com/phoenixframework/phoenix_live_view.git"]}
Ensure they match or specify one of the above in your deps and set "override: true"
** (Mix) Can't continue due to errors on dependencies
Rather not mark LV with override, but I get that this is pre-release.
Yes. At the moment heex formatter depends on live view master and I’m afraid you have to use override:true in your mix.exs.
For anyone following this thread, heex formatter no longer relies on live view master. Instead as of Update mix.exs by cvkmohan · Pull Request #52 · feliperenan/heex_formatter · GitHub it relies on liveview 0.17.7 or higher.
@axelson - I have observed that with Elixir 1.13.3, suddenly, the ~H sigils inside the *.ex files are getting formatted on save in VS Code. However, the same is not happening for *.heex files. I could not understand why so. Can you please explain?
Regards,
I’d say that is because ~H is delegated to the mix format plugin while *.heex is not handled at all by mix format.
Hmm… but, if I run mix format from command line, even *.heex files are getting formatted correctly.
I also struggled to have the formatter automatically running in a consistent way and noticed mix format does the trick, so just went ahead and created a manual task and keybinding to move on for now until I can get time to revisit the issue.
In tasks.json
{
"label": "mix format",
"type": "shell",
"command": "mix",
"args": [
"format",
"${file}"
],
"presentation": {
"echo": false,
"reveal": "silent",
"focus": false,
"panel": "shared",
"showReuseMessage": false,
"clear": false
}
},
and in keybindings.json
{
"key": "shift+alt+f",
"command": "workbench.action.tasks.runTask",
"args": "mix format",
"when": "editorTextFocus && editorLangId =~ /html-eex|elixir|phoenix-heex/"
},
Another technique I used is
Install the extension emeraldwalk.runonsave
In VS Code’s settings.json, add an entry like this:
"emeraldwalk.runonsave": {
"commands": [
{
"match": "\\.heex|ex?$",
"isAsync": true,
"cmd": "cd ${workspaceRoot} && mix format ${file}"
}
]
},
Hi everyone!
We have just merged this PR: Update readme instructions for clarity by axelson · Pull Request #55 · feliperenan/heex_formatter · GitHub which not only refactor the code but improves how the code is going to be formatted.
Please, give it a try and let me know about any issue you may face. Also, notice that you might get some difference from how it has been formatting before.
PS: In case you don’t want to update it, I’ve created a git tag for previous version. But I really recommend you to try out the latest version
Thanks
I have just noticed I linked the wrong PR. Here is the one I meant.
Hello,
Are you planning to publish on hex.pm?
That one breaks dependabot that is unable to get the package from github.
It is now part of Live View
© Copyright Elixir Forum | Terms | Privacy & Cookies
