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