Prettier - 在多行中打破 html 個類

Question

我正在嘗試在 vscode 上使用更漂亮的格式化程序插件實現一種行為，當 html 標記有多個類時，它會在每個 class 行中打破每個class 行達到“自動換行列”限制（vscode 配置). 是否可以？

當前行為

    <div                                                                                             | - LINE LIMIT
        class="m-10 flex min-h-screen items-center justify-center rounded-2xl border-2 border-red-500
        bg-indigo-500 p-10 shadow-2xl"
    ></div>
    <div class="flex items-center justify-center"></div>

預期行為

    <div                                                                           | - LINE LIMIT
        class="
            m-10
            flex
            min-h-screen
            items-center
            justify-center
            rounded-2xl
            border-2
            border-red-500
            bg-indigo-500
            p-10
            shadow-2xl
        "
    ></div>
    <div class="flex items-center justify-center"></div>

Answer 1

您應該將printWidth添加到.prettierrc

 { "printWidth": 100, "endOfLine": "lf", "semi": true, "singleQuote": true, }

Answer 2

我們可以使用 Prettier 2.4。 它在 Prettier 2.5 中被禁用

禁用 HTML class 屬性的“智能格式化”

2.5.0 發行說明

將 HTML class 屬性折疊到一行（ #11827 by @jlongster ）

<!-- Input -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.4 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

<!-- Prettier 2.5 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

Answer 3

就像今天（Prettier 3.5）一樣，您只需要在需要的地方打破自己的界限，然后 Prettier 就會尊重這一點。 您可以在此問題評論中看到這是如何發現的，應該更容易找到這些東西哈。

Answer 4

請按照以下步驟避免在多行中中斷 html 類。

1. Go 到更漂亮的擴展設置。
2. 設置打印寬度：600