Visual studio code html.eex support

Hi,

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.

Thanks,
Sebastian.

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:

4 Likes

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:

21 Likes

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. " != ”

3 Likes

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?

3 Likes

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

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

Thank! This method is ideal for solving the problem.
And it works with https://github.com/stefanjarina/vscode-eex-snippets simultaneously.

2 Likes

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.

8 Likes

And

"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"
}
12 Likes

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

I’ve been fighting this one for a while as I really wish prettier would address elixir https://github.com/prettier/prettier/issues/5286 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 https://marketplace.visualstudio.com/items?itemName=jakebecker.elixir-ls extension as the other one (fork) will be deprecated. Development has moved back to the original.

4 Likes