sergio

sergio

Phoenix Liveview Templates - automatic formatting using Prettier

Here’s a quick 3 minute video explaining how to get a great workflow for Phoenix Liveview templates. Good dev ux!

Most Liked

sergio

sergio

It does, works great! Just make sure you add the file association for .heex templates.

"files.associations": {
  "*.eex": "html-eex",
  "*.leex": "html-eex",
  "*.heex": "html-eex"
},
cvkmohan

cvkmohan

using prettier-plugin-eex has several problems in the formatting. It replaces code with <eext1 /> in many cases.
Further, it does not handle heex files well. For example <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} /> this line generates an error - because href={} is not handled correctly.
If you are using surface, far superior solution is GitHub - surface-ui/surface_formatter · GitHub.
In the upcoming elixir 1.13 release, custom formatters are supported https://github.com/elixir-lang/elixir/pull/11246 - and - we should expect a good elixir formatter that understands both HTML and elixir interpolation should arrive.

Nefcairon

Nefcairon

You can also use it for .sface. It just doesn’t reformat constructs like:

{#for item <- @list}
<h1>Item: {item}</h1>
{#else} No items {/for}

Where Next?

Popular in Screencasts Top

New
New
knewter
I wrote up a free episode on how to deploy a Phoenix app with Gatling to a DigitalOcean droplet. Hope it’s useful to someone. Thing I’m n...
New
ElixirCasts
I made a video to cover the basics of routing in Phoenix. https://elixircasts.io/phoenix-routes
New
sevensidedmarble
Since static typing is all the rage in Elixir right now, maybe some of you will appreciate my most recent video. It’s all about how to ge...
New
ElixirCasts
I made a video showing how you can use virtual attributes in Ecto to create fields that are not persisted to the database. https://elixi...
New
ElixirCasts
I made an episode where we use escript to make a Rock-Paper-Scissors we can play from the command line. https://elixircasts.io/command-l...
New
aseigo
Elixir1.5.0-rc0 and OTP 20 are significant releases, full of features, bug fixes and optimizations. I was really curious as to how the op...
New
omgneering
I made the next video in the OTP series to help get started with Supervisor methods and syntax. The video goes over the init methods lik...
New
alvises
The Beauty of Pattern Matching in Elixir (Screencast + Transcript) One of the reasons I fell in :heart: with Elixir is pattern matchin...
New

Other popular topics Top

AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
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
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
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
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52341 488
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement