Visual studio code html.eex support

Questions / Help
,
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:

4 Likes
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:

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

3 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"
}
10 Likes
10

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

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

8 Likes
12

And

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

for LiveView’s with eex highlighting!

1 Like
13

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
14

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
15

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
16

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

17

I install the elixir-ls and worked.

1 Like
18

A VS Code extention?

19
1 Like
20

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