How to use 'phoenix-heex' templates in VSCode

@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 ( 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!


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