Visual studio code html.eex support


What plugins and settings are you guys using for making life easier coding templates? Specifically i would like to know if there is a way to solve auto closing html tags.


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).

1 Like

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


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


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… :thinking:

1 Like

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 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.



"files.associations": {"*.html.leex": "HTML (Eex)"}

for LiveView’s with eex highlighting!

1 Like

If you use the vscode-elixir-ls extension, note that EEx-related settings may need to change due to recent updates. With the latest version of that package, capitalize the second E:

"emmet.includeLanguages": {
  "HTML (EEx)": "html"

So to add Live EEx template support, combining replies above, do:
Preferences -> Settings -> Search for “files: associations”, edit in settings.json:

"files.associations": {
        "*.html.leex": "HTML (EEx)"

I’ve been fighting this one for a while as I really wish prettier would address elixir but seeing as this lib has 600+ issues I’m not holding my breath. :frowning:

Changing my Eex to html it causes prettier to flag my <%= %> code as errors. So frustrating!

1 Like

Also note that sometimes depending I’ve seen "HTML (eex)", "HTML (EEX)" and "HTML (EEx)"… yeah

I install the elixir-ls and worked.

1 Like

A VS Code extention?

1 Like

You should use the extension as the other one (fork) will be deprecated. Development has moved back to the original.