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.
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).
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 https://github.com/stefanjarina/vscode-eex-snippets 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.
And
"files.associations": {"*.html.leex": "HTML (Eex)"}
for LiveView’s with eex
highlighting!
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 https://github.com/prettier/prettier/issues/5286 but seeing as this lib has 600+ issues I’m not holding my breath.
Changing my Eex to html it causes prettier to flag my <%= %> code as errors. So frustrating!
Also note that sometimes depending I’ve seen "HTML (eex)"
, "HTML (EEX)"
and "HTML (EEx)"
… yeah
I install the elixir-ls
and worked.
A VS Code extention?
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.