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?
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.
… 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!
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.)?
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.
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.
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.
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:
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
}
