How to use 'phoenix-heex' templates in VSCode

[RoyalMist]

Hi all

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

[phpcitizen]

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.

[cvkmohan]

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.

[Sebb]

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	formulahendry.auto-close-tag
Auto Rename Tag	v0.1.9	Jun Han	formulahendry.auto-rename-tag
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

[malloryerik]

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

[Sebb]

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.

[mtremsal]

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
  }

[Ritvyk]

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

Heex HTML - Visual Studio Marketplace

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

[malloryerik]

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

[Sky0307]

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?

[cvkmohan]

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

[tobstarr]

@cvkmohan with this being merged into elixir now: can you share any config on how to use heex_formatter within VS Code?

[cvkmohan]

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.

[ryanjafari]

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!

[ryanjafari]

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.

[malloryerik]

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?

[romenigld]

I recently post this:

VSCode Custom User Snippets For '*_live.html.heex' Templates Not Working

I am trying to use the snippet’s code from the liveview course of the pragprog which I loved to use on the files *_live.html.heex. The snippet’s code is working very well ins the the render functions like: def render(assigns) do ~H""" (efor + TAB) """ end but inside the *_live.html.heex files is not working. What I need to do for take this working? I have created the snippets code doing inside the VSCode menu: Code > Preferences > Configure User Snippets and then inside the eli…

You can watch the settings.json file, for set the phoenix-heex templates .

[rio517]

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.

[mikeclark]

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

Suggested tweaks welcome!

[Neophen]

@rio517

“surface”: “HTML”

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