The very basics... auto-formatting in .eex

phoenix
templates
troubleshooting
ide

#1

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?


#2

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.


#3

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

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

Prettier:

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

Beautify:

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!