Visual studio code html.eex support

You need to tell VS Code to treat html.eex files as HTML.. Just google this topic to find out how to do it.. I am not in front of my PC to tell you right now..

Doesn’t VSCode have a way to have multiple languages in a single file? In Atom the blah.html.eex is treated as HTML as default (with html autocomplete and all) except in <%...%> chunks where it is instead treated like Elixir (with intellisense and all).

What you can, is just manually specify how VSCode should treat your file.
In the right bottom corner there is a file type the default would be html eex change to html

Then VScode automatically will close your tags again

The above solution is good if you need it as a temporary solution…
For a long term, change your user settings in:

File -> Preferences -> Settings

Scrool Down until you will see:

Files(14) - number might be different

There you would see text like:

// Configure file associations to languages (e.g. “*.extension”: “html”).
These have precedence over the default associations of the languages installed.
“files.associations”: {},

Press edit → it should copy settings automatically to the right screen where you have USER settings.
Change to:

“files.associations”: {“*.html.eex”: “html”}

Save and Close File with settings

Test that it works

I don’t understand why this setting doesn’t work for me until I replaced the “html” double quotes by hand in the editor. Without this replacement, vscode was showing “expected value” error…

Because those are not all double-quotes. " != ”

Note that with such settings, formatters such as Prettier might produce incorrect code due to the Elixir code scattered around with <%= etc. It would be best if there’s some better native syntax support for .html.eex files.

Also I seem to be able to get tags automatically closing with the language set as the default HTML (Eex) without problems?

I was able to get emmet working in VSCode with the following setting:

"emmet.includeLanguages": {
    "HTML (Eex)": "html"
}

Thank! This method is ideal for solving the problem.
And it works with GitHub - stefanjarina/vscode-eex-snippets: Elixir EEx and HTML (EEx) code snippets. · GitHub simultaneously.

I wish support for vscode was better. I have no intellisense for elixir, there’s no formatter to auto-indent the html and no autocomplete for phoenix functions that are available in the template.