Settings View Source Phoenix.LiveView.HTMLFormatter (Phoenix LiveView v0.17.8)

Format HEEx templates from .heex files or ~H sigils.

This is a mix format plugin.

Note: The HEEx HTML Formatter requires Elixir v1.13+.

setup

Setup

Add it as plugin to your .formatter.exs file and make sure to put theheex extension in the inputs option.

[
  plugins: [Phoenix.LiveView.HTMLFormatter],
  inputs: ["*.{heex,ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{heex,ex,exs}"],
  # ...
]

options

Options

• :line_length - The Elixir formatter defaults to a maximum line length of 98 characters, which can be overwritten with the :line_length option in your .formatter.exs file.

• :heex_line_length - change the line length only for the HEEx formatter.

  [
    # ...omitted
    heex_line_length: 300
  ]

formatting

Formatting

This formatter tries to be as consistent as possible with the Elixir formatter.

Given HTML like this:

  <section><h1>   <b><%= @user.name %></b></h1></section>

It will be formatted as:

<section>
  <h1><b><%= @user.name %></b></h1>
</section>

A block element will go to the next line, while inline elements will be kept in the current line as long as they fit within the configured line length.

The following links list all block and inline elements.

• https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#elements
• https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#list_of_inline_elements

It will also keep inline elements in their own lines if you intentionally write them this way:

<section>
  <h1>
    <b><%= @user.name %></b>
  </h1>
</section>

This formatter will place all attributes on their own lines when they do not all fit in the current line. Therefore this:

<section id="user-section-id" class="sm:focus:block flex w-full p-3" phx-click="send-event">
  <p>Hi</p>
</section>

Will be formatted to:

<section
  id="user-section-id"
  class="sm:focus:block flex w-full p-3"
  phx-click="send-event"
>
  <p>Hi</p>
</section>

This formatter does not format Elixir expressions with do...end. The content within it will be formatted accordingly though. Therefore, the given input:

<%= live_redirect(
       to: "/my/path",
  class: "my class"
) do %>
        My Link
<% end %>

Will be formatted to

<%= live_redirect(
       to: "/my/path",
  class: "my class"
) do %>
  My Link
<% end %>

Note that only the text My Link has been formatted.

intentional-new-lines

Intentional new lines

The formatter will keep intentional new lines. However, the formatter will always keep a maximum of one line break in case you have multiple ones:

<p>
  text


  text
</p>

Will be formatted to:

<p>
  text

  text
</p>