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

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

Suggested tweaks welcome!

10 Likes

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

2 Likes

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.

Capture d’écran du 2024-02-06 17-32-08

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.

2 Likes

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.

1 Like

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

1 Like

I also experienced this issue with folding code in long heex templates, but have worked around it with this config change:

"[phoenix-heex]": {
    "editor.foldingStrategy": "indentation",
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "JakeBecker.elixir-ls"
  },

This lets VSCode fold based purely on indentation - because it’s being formatted by ElixirLs on save, I haven’t found any issues with folding as yet (though I’m sure there will be some edge cases since I’m relying on indentation only).

1 Like