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?


Closest thing I’ve found is telling vscode .eex is .html. But you lose the .eex syntax highlighting. I’m interested in hearing what others have discovered. I don’t spend a ton of time in .eex files so it hasn’t been too big of a deal for me.


That’s the closest I’ve got, too. Which plugin do you use?

Here’s the results/issues I’ve seen so far:


Won’t parse EEx that contains strings due to the extra double quotes, and so fails to format entirely:


This did format, but had the same double-quote issue with EEx tags that added a \n before the closing quote. Also added a random newline between the closing </script> (although perhaps that’s standard Beautify behaviour? :man_shrugging:

I have a feeling I cannot possibly have exhausted all the options. Are there any other options I’m overlooking?

Thanks in advance!