How to use 'phoenix-heex' templates in VSCode

Hi all :slightly_smiling_face:

I just merged the PR sorry for the delay.
Version 0.5.0 is ok with the new format :slight_smile:


I cannot trigger the .heex files to work.

settings.json I have:

  "files.associations": {
    "*.heex": "phoenix-heex"
  "editor.defaultFormatter": "RoyalMist.vscode-eex-format"

EDIT: Seems like triggering works with these settings but tag alignments with new tags

<.function ... /> 

does not align properly.

1 Like

As much as I understand, this is working on top of htmlbeautifier gem. That would mean it would understand only HTML tags. Either erb files or heex files or simple eex files, the interpolation tags will be ignored. Add to that, it will not understand the sigils also. For example, if you write the component inside ~F that template will not be rendered at all.
We need to wait for a core heex formatter that is possible in Elixir 1.13 like the surface_formatter.

Thanks for the guide.
I do not quite understand how to find the language ID and how to connect plugins to them.
It’s working for those you posted but I’d like to use some more plugins.

Here is a list of the plugins and the state of affairs:

Extension HEEX ~H-sigil Comment
Alpine.js IntelliSense - -
Auto Close Tag - -
Auto Rename Tag + + works for components
Elixir Templates Formatter o - not for components
Phoenix Framework + +
Tailwind CSS IntelliSense + -

How can we put a + in each cell?

Extension Ver Author ID
Alpine.js IntelliSense v1.2.0 Adrian Wilczyński adrianwilczynski.alpine-js-intellisense
Auto Close Tag v0.5.13 Jun Han
Auto Rename Tag v0.1.9 Jun Han
Elixir Templates Formatter v0.5.0 RoyalMist royalmist.vscode-eex-format
ElixirLS: Elixir support and debugger v0.9.0 ElixirLS jakebecker.elixir-ls
Phoenix Framework v0.1.1 phoenixframework phoenixframework.phoenix
Tailwind CSS IntelliSense v0.7.4 Tailwind Labs bradlc.vscode-tailwindcss

Do you know what it would take to get something like a formatter or Intellisense working inside of an ~H sigil? (I don’t.)

vscode-phoenix can do syntax highlighting for ~H. There is an issue for formatting: Code formatting support · Issue #6 · phoenixframework/vscode-phoenix · GitHub.

There is the new plugins feature for mix format, which makes it possible to format ~H. Don’t think we’ll ever see Intellisense for ~H.


For auto-formatting heex.html files, I wasn’t able to rely on any of the plugins listed in the table, but Beautify works well-enough after adding phoenix-heex to its config file:

  "beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautifyrc"]
      // "ext": ["js", "json"]
      // ^^ to set extensions to be beautified using the javascript beautifier
    "css": ["css", "scss"],
    "html": ["htm", "html", "phoenix-heex"]
    // ^^ providing just an array sets the VS Code file type

@malloryerik ncase you want the same ability with pure .HTML.heex files , take a look at this extension just came into marketplace.

It also takes alpine js x-* and phx and new <.component> syntax into consideration :smiley:


Oh excellent! I’m going to try it out today.

1 Like

Hey guys, I am actually looking for extension that can format the tab within the .heex file. Is there any extensions that can do this?

feliperenan/heex_formatter: Formatter for Phoenix Live View templates. ( This extension handles all the heex file formatting.
Only caveat is elixir 1.13 has to be used.

@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

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

Here’s my setup which seems to be working nicely.

Suggested tweaks welcome!


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.

install single elixir globally
install asdf without brew
always launch VS Code from the terminal that has access to asdf

1 Like