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.

image1406×194 7.34 KB

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.

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.

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