格式化 .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 中，並在 .formatter.exs 檔案中新增 plugins: [Phoenix.LiveView.HTMLFormatter]。這是因為格式器不會嘗試載入所有子應用程式的依賴項。

編輯器支援

大多數支援 mix format 整合的編輯器都應自動格式化 .heex 和 ~H 範本。其他編輯器可能需要自訂整合，甚至提供額外功能。以下是一些參考文章

• 在 VS Code 中格式化 HEEx 範本

選項

• :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>

區塊元素會換至下一行，而內嵌元素會保持在當前行內，只要它們符合設定的行長即可。

以下連結列出所有區塊和內嵌元素。

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

您如果故意這樣寫，它也會將內聯元素保存在它們自己的行中

<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 %>

請注意只有文字我的連結已格式化。

故意的換行

這格式化會保留故意的換行。但是，如果您有多個會換行的，格式化程式永遠會保留最大的一個換行

<p>
  text


  text
</p>

將會被格式化為

<p>
  text

  text
</p>

內聯元素

當元素前後沒有空白的文字時，我們不會格式化內聯元素。否則，它會損害所呈現的內容而添加一個額外的空格。

這是內聯元素的清單

https://developer.mozilla.org/zh-TW/docs/Web/HTML/Inline_elements#list_of_inline_elements

跳過格式化

如果您不想自動格式化您的HTML的一部分。您可以使用特殊的phx-no-format屬性，這樣格式化程式就會略過元素區塊。請注意這個屬性不會被呈現。

因此

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

將會保留為您的程式碼編輯器，但呈現為

<textarea>My content</textarea>

註解

內聯註解<%# 註解 %>是過時的，而格式化程式會從範本中靜默地略過它們。您必須將它們更改為多行註解<%!-- 註解 --%>在Elixir v1.14+，或在<%和#之間加入一個空格，例如<% # 註解 %>。