Visual studio code html.eex support

phoenix
eex
#1

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.

#2

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…

#3

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
#4

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:

1 Like
#5

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:

9 Likes
#6

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

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

2 Likes
#8

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
#9

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

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

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

1 Like
#11

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.

5 Likes
#12

And

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

for LiveView’s with eex highlighting!