@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.
1 Like
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!
4 Likes
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.
1 Like
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 .
1 Like
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.
1 Like
