查看源代码 Phoenix.LiveView.HTMLFormatter (Phoenix LiveView v0.20.17)

格式化来自 .heex 文件或 ~H 标记的 HEEx 模板。

这是一个 mix format 插件。

注意：HEEx HTML 格式化程序需要 Elixir v1.13.4 或更高版本。

设置

将其作为插件添加到您的 .formatter.exs 文件中，并确保将 heex 扩展名放在 inputs 选项中。

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

对于伞形项目

在伞形项目中，您还必须更改伞形根目录下的两个文件，将 :phoenix_live_view 添加到 mix.exs 文件中的 deps 中，并将 plugins: [Phoenix.LiveView.HTMLFormatter] 添加到 .formatter.exs 文件中。这是因为格式化程序不会尝试加载所有子应用程序的依赖项。

编辑器支持

大多数支持 mix format 集成的编辑器应该会自动格式化 .heex 和 ~H 模板。其他编辑器可能需要自定义集成，甚至提供额外的功能。以下是一些参考帖子

选项

  • :line_length - Elixir 格式化程序默认的最大行长为 98 个字符，可以在 .formatter.exs 文件中的 :line_length 选项中覆盖它。

  • :heex_line_length - 只更改 HEEx 格式化程序的行长。

    [
  # ...omitted
  heex_line_length: 300
]

格式化

此格式化程序尝试尽可能与 Elixir 格式化程序保持一致。

给定像这样的 HTML

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

它将被格式化为

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

块元素将转到下一行，而内联元素将保留在当前行中，只要它们适合配置的行长即可。

以下链接列出了所有块和内联元素。

如果您有意以这种方式编写内联元素，它也会将它们保留在自己的行中

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

此格式化程序将在所有属性都无法容纳在当前行时将它们放在自己的行上。因此，这

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

将被格式化为

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

此格式化程序**不会**格式化带有 do...end 的 Elixir 表达式。但是，其中的内容将被相应地格式化。因此，给定的输入

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

将被格式化为

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

请注意，只有文本 My Link 被格式化了。

故意换行

格式化程序将保留故意换行。但是，格式化程序将始终保留最大一个换行符，以防您有多个换行符

<p>
  text


  text
</p>

将被格式化为

<p>
  text

  text
</p>

内联元素

当元素前后没有空格的文本时，我们不会格式化内联元素。否则，它会通过添加额外的空格来破坏渲染结果。

这是内联元素的列表

https://mdn.org.cn/en-US/docs/Web/HTML/Inline_elements#list_of_inline_elements

跳过格式化

如果您不想让您的 HTML 的一部分被自动格式化。可以使用特殊的 phx-no-format 属性，以便格式化程序跳过元素块。请注意，此属性不会被渲染。

因此

<.textarea phx-no-format>My content</.textarea>

将保留在您的代码编辑器中，但渲染为

<textarea>My content</textarea>

注释

内联注释 <%# comment %> 已被弃用，格式化程序将从模板中静默地删除它们。您必须将它们更改为 Elixir v1.14+ 上的多行注释 <%!-- comment --%>，或在 <% 和 # 之间引入一个空格，例如 <% # comment %>。

总结

函数

is_tag_open(tag_type)

函数

链接到此宏

is_tag_open(tag_type)

查看源代码 (宏)