lee

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

josevalim

Creator of Elixir

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

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

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.

Where Next?

Popular in Questions Top

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
nobody
Hi! In PHP: $SERVER['SERVERADDR'] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New

Other popular topics Top

Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29305 241
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30840 112
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53578 245
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
vegabook
I'm brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New

We're in Beta

About us Mission Statement