lee
The very basics... auto-formatting in .eex
I’ve seen a few related threads asking about auto-formatting .eex files, so I apologise in advance for any redundancy… although all seem to have either no responses, or no firm resolution.
I’ve started a new Phoenix project, and I’m importing large chunks of React component code that I want to convert to basic HTML and EEx tags.
In React, I’d just use Prettier or ESLint - and would never think twice about formatting. Save a file, et voila - everything’s auto-indented, all the tag attrs are in the right place, and everything just looks right. I can copy and paste code and not worry about it not aligning.
I feel like I’m falling at the first hurdle with .eex - I haven’t found a single IDE or plugin that handles it. I tried Prettier, and it broke my <%= tags %>. I tried both IntelliJ and WebStorm (which I guess uses the same plugin); neither Reformat Code nor Auto-Indent Lines had any effect. I tried two plugins in VSCode… neither seemed to affect formatting, either.
What does everyone else use to keep their EEx in check?
Most Liked
josevalim
FWIW, a potentially straight-forward solution to this is to get an existing embedded language, such as PHP or Ruby’s ERB, duplicate its configuration file and then changing the embedded language to Elixir.
I did this on Sublime Text, copying from Ruby’s ERB, and it was relatively easy and it works quite well.
fklement
I posted an update about the configuration fo beautify to format EEx template as good as possible now. Works quite well now for me.
Have a look at https://github.com/fr1zle/vscode-elixir/issues/129
malloryerik
In settings.json, instead of setting "files.associations": { *.html.EEx: ... } to "HTML", set it to "HTML (EEx)":
"files.associations": {
"*.js": "javascript",
"*.ex": "elixir",
"*.exs": "elixir",
"*.eex": "EEx",
"*.html.EEx": "HTML (EEx)"
},
I just stumbled onto this, and @tme_317 has already found it, but you don’t need Beautify.
Once files.associations for .html.eex are set to “HTML (EEx)” it appears that .eex work as an embedded language inside of .html, so they both work seamlessly. Snippets extensions work, .eex tags autocomplete, intellisense and syntax highlighting work, it’s all back.







