@cvkmohan with this being merged into elixir now: can you share any config on how to use heex_formatter within VS Code?
It is getting merged into Phoenix LiveView (github.com) Not Elixir. I think it is a significant difference to be highlighted.
I think, in the coming version of Phoenix LiveView - most likely 0.18, it will come built-in - and we should be able to use with zero configuration.
However, till then, I am still using {:heex_formatter, github: "feliperenan/heex_formatter"},
in my mix file. My .formatter.exs
is like this
[
plugins: [HeexFormatter],
import_deps: [:ecto, :phoenix],
inputs: ["*.{heex,ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{heex,ex,exs}"],
subdirectories: ["priv/*/migrations"]
]
This is working well so far.
An update here:
I am on {:phoenix_live_view, "~> 0.17.10"}
and the following works to format .heex
(as well as .ex, .exs
) using mix format
:
# .formatter.exs
[
plugins: [Phoenix.LiveView.HTMLFormatter],
inputs: ["*.{heex,ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{heex,ex,exs}"],
import_deps: [:ecto, :phoenix],
subdirectories: ["priv/*/migrations"]
]
Appears that the work has been merged in.
I use Elixir Mix Formatter to trigger mix format
on save in VSCode with editor.formatOnSave: true
in settings.json
. Also:
// settings.json
"[elixir]": {
"editor.defaultFormatter": "animus-coop.vscode-elixir-mix-formatter",
},
"[phoenix-heex]": {
"editor.defaultFormatter": "animus-coop.vscode-elixir-mix-formatter"
}
…to ensure the right formatter extension is used for these files.
Have fun!
The Elixir Mix Formatter extension can invoke mix format
on your project. Configured with .formatter.exs
at the project root (need: plugins: [Phoenix.LiveView.HTMLFormatter]
). Will format inside of ~H. Have it working right now.
Or simply run mix format
.
No IntelliSense tho.
You can currently get Tailwind IntelliSense in ~H
sigil blocks in your .ex
and .exs
files, and I imagine also Surface .sface
.
Just to your settings.json
:
"tailwindCSS.includeLanguages": {
"elixir": "html",
"surface": "html"
},
The “html” part is telling Tailwind IntelliSense to treat files with elixir and surface IntelliSense language IDs as html files (css and javascript are the other options.)
Here’s the explanation from Tailwind.
A question.
Last year the Tailwind IntelliSense maintainer was so kind as to add support for .heex
files, so Tailwind IntelliSense works out of the box for .heex
files.
Would we want the same support for .ex
and .sface
files, or would it conflict somehow outside of ~H
sigil blocks?
I recently post this:
You can watch the settings.json
file, for set the phoenix-heex
templates .
Just to clarify for anyone: to get Tailwind CSS Intellisense for ~H
sigil blocks in .ex files, you do have to add "surface": "HTML"
to your included languages configuration.
I overlooked this when setting up a new dev environment.
One important thing for mac os at least, if you’ve installed elixir/erlang with asdf, and asdf is installed via brew, and you launch VS Code through GUI rather than the shell, the elixir-ls extension can be broken.
Workarounds
install single elixir globally
install asdf without brew
always launch VS Code from the terminal that has access to asdf
I’ve observed that the feature for folding and unfolding HTML
tags isn’t functioning when I’m working with HEEx
templates in Visual Studio Code. However, this feature seems to work perfectly fine with standard .html
templates.
I’m reaching out to see if anyone could provide some guidance or suggestions on how to enable this feature specifically for HEEx
templates. Any assistance would be greatly appreciated. Thank you in advance!
For reference, here are my current settings that have been working well for me, except for the issue mentioned above.
{
"emmet.includeLanguages": {
"html-eex": "html",
"phoenix-heex": "html",
"elixir": "html"
},
"tailwindCSS.includeLanguages": {
"phoenix-heex": "html",
"elixir": "html"
}
}
I’ve noticed that I can fold and unfold HTML
tags even in .html.heex
files if I act quickly after launching VSCode. However, a few seconds after an alert appears (which you can see in the image below), the functionality of folding and unfolding HTML
tags in the editor for HEEx
templates becomes unavailable.
As a natural response, I disabled the ElixirLS
extension and restarted VSCode. This gave me all the time I needed to fold/hide the content of all the tags with long contents that made the template difficult to read. I should mention that I am in the process of converting a really lengthy template into component bricks to facilitate readability and reuse. But initially, I need to have an overview of the template structure. Otherwise, I wouldn’t need to fold HTML
tags in the first place.
In short, disabling ElixirLS
helps me for now, and then I can reactivate it to continue my work once I’ve reduced certain blocks of HTML
code. Fortunately, they remain as they were once I’ve restarted the editor…
Another thing to note is when saving a very long template for the first time (I copy/paste from downloadable HTML
templates), ElixirLS
churns for several minutes before finishing formatting. Unfortunately, the outcome of this lengthy process doesn’t quite meet my expectations. For this reason, I resort to using an online HTML
code formatting site, but that’s a different story altogether.
ElixirLS does not support folding ranges in heex and eex (a PR implementing that would be appreciated). Alternatively, maybe it’s possible to set up request forwarding to other language server in vscode extension (a PR would be appreciated)
Please open an issue for slow formatting or provide a repro steps.
Thank you for your response and for the contributions you’ve made to the community.
Certainly, I can do that. I should also mention that the slow formatting only occurs the first time I save the HEEx template after copy-pasting the lengthy HTML content. However, it takes almost 10 minutes. I will provide more details in the issue that I will be opening shortly.
Edit:
I’ve opened an issue: Slow Formatting on First Save of Lengthy HEEx Templates · Issue #407 · elixir-lsp/vscode-elixir-ls · GitHub. I hope that’s the correct repository for it.
I can confirm that the initial format is slow. My first guess is computing string difference or document updates is inefficient if there are so many of them. On my laptop it takes ~1 minute