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.
In the upcoming elixir 1.13 release, custom formatters are supported Formatter plugins by josevalim · Pull Request #11246 · elixir-lang/elixir · GitHub - 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
SmartLogic
We at SmartLogic have been running an intermittent series of live coding sessions on Twitch that we then archive on YouTube; in the lates...
New
sevensidedmarble
New video on LiveView for almost total beginner level: Hopefully this is a helpful starting point for someone out there!
New
snake117
I came across ElixirCasts.io, a free, high quality screencast showing various subjects in Elixir and Phoenix. I didn't see it posted on t...
New
New
omgneering
Up and Running - Elixir Phoenix on Digital Ocean A playlist of videos that go through basic app creation, getting a Digital Ocean server...
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
plicjo
I created a tutorial for implementing a toggle button in LiveView. It’s been done against Phoenix 1.7 to future-proof it, ...
New
ElixirCasts
Hello everyone, these are the episodes that are part the Alchemist’s Edition, which is the paid subscription that helps support ElixirCas...
New
AstonJ
3 episodes at $6.75 each Build real-time apps with ease using Phoenix. In this screencast series, get a brief introduction to the Elixi...
New

Other popular topics Top

shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
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
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
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
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
AstonJ
by Lance Halvorsen Elixir and Phoenix are generating tremendous excitement as an unbeatable platform for building modern web application...
460 27162 124
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New

We're in Beta

About us Mission Statement