VSCode & 'phoenix-heex'

Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode.
The solution seems to be, in a hyphenated word, phoenix-heex.

phoenix-heex is the VSCode “language id” for .html.heex templates. If I understand correctly, Marlus Saraiva @msaraiva set it up, and it seems to solve… everything?

The new Phoenix Framework VSCode extension uses it.

So, just add phoenix-heex (and not, for example, HEEx) as a language for html and the vs-code-eex-formatter, Tailwind IntelliSense extension, HTML expansion/completion and other extensions all work today. :racehorse:

In your VSCode’s settings.json :

emmet HTML/CSS expansion & snippets

    "emmet.includeLanguages": {
        ...
        "phoenix-heex": "html"
    },

vs-code-eex-formatter

    "[phoenix-heex]": {
        "editor.defaultFormatter": "RoyalMist.vscode-eex-format"
    },

Tailwind class autocomplete (<- The maintainer told me how to find a language ID.)

    "tailwindCSS.includeLanguages": {
        "phoenix-heex": "html"
    },

… and likewise for the other extensions I use that allow language id input in setting.json; planting a “phoenix-heex” following the general pattern of other listed languages has seemed to work. :man_farmer:

I know quite little about this stuff, actually, so any help, advice and/or correction is welcome!

33 Likes

Thanks a lot, you really saved me a lot of time searching and figuring out.

2 Likes

Thank you as well!

Do you get HTML intellisense in VS Code with this extension? I get syntax highlighting, but no HTML intellisense or autocompletion (eg. typing “<div c” should bring attributes like “class”, right?).

Also how about intellisense for assigns, functions defined in views, helpers (link, Routes etc.)?

1 Like

I was unable to get the HEEx template formatting to work immediately.

    "[phoenix-heex]": {
        "editor.defaultFormatter": "RoyalMist.vscode-eex-format"
    },

When attempting to format a HEEx file, I would get the following error.

Extension 'Elixir Templates Formatter' is configured as formatter but it cannot format 'HEEx'-files

After some searching and a bit of hacking, I can get it to work if I make add ‘phoenix-heex’ to the providers in the the royalmist.vscode-eex-format-0.2.0 extension. Oh, I also have to format a EEx file first.

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
function activate(context) {
    vscode.languages.registerDocumentFormattingEditProvider(["html", "eex", "HTML (EEx)", "html-eex", "phoenix-heex" ], {
        provideDocumentFormattingEdits(document) {
...

So, a couple of questions. First, has anybody else had this problem?

Second, why are there so many forks of this project? Is RoyalMist’s fork the one everybody uses? If I can figure this out I’ll try to submit a pull request.

2 Likes

If you have the problem I had, here’s the pull request I made to RoyalMist’s fork to get this to work.

Also, thanks for making the original post. It really helped me get going.

Cheers!

2 Likes

Thanks so much! I’ve had various problems with this setup and it’s still never perfect, at least as I have it.

Second, why are there so many forks of this project? Is RoyalMist’s fork the one everybody uses?

The RoyalMist fork is the one I’ve seen mentioned the most, including by the PragmaticStudio folks. I think there must be so many forks because none are just right?

There’s a native Elixir HEEx formatter that’s been started, but I’m not sure when it will be ready.

Just two commits so far, but it looks like a sizeable amount of code.

@mikael asked about HTML Intellisense:

Do you get HTML intellisense in VS Code with this extension? I get syntax highlighting, but no HTML intellisense or autocompletion (eg. typing “<div c” should bring attributes like “class”, right?).

Well as I have things set up now it seems I only get Elixir Intellisense in .HEEx templates. Emmet works, and at present I’ve also got Tab9 and GitHub Copilot. Tab9 seems to give me most HTML autocomplete, and Copilot is like… umm… well it’s certainly interesting.

As for things like assigns, I find myself looking to my file myself, so no. I tend to work in separate module and template files, and I’m not yet sure how much of a difference that makes.

2 Likes

Yes, it’s not working for me as well. Getting the same error!

2 Likes
git clone https://github.com/gabecook/vscode-eex-format
cd vscode-eex-format
npm install -g vsce
npm install
vsce package
code --install-extension vscode-eex-format-0.2.0.vsix
gem install htmlbeautifier

plus the setting changes from above. :dizzy_face:

1 Like

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:

2 Likes

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.

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 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
3 Likes

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.

1 Like

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
  }
2 Likes

@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:

3 Likes

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

1 Like