更漂亮的-在多行中拆分html类

Question

我试图在vscode上使用更漂亮的格式化程序插件来实现一种行为:当html标记有几个类时，它会为每个拆分行中的每个类，但是只有当该类行到达"Word Wrap列“限制 (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

我们可以用更漂亮的2.4。它在更漂亮的2.5中禁用

禁用HTML类属性的“智能格式化”

2.5.0发行说明

将HTML属性折叠到一行(#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 2

因为今天(更漂亮的3.5)你只需要打破你自己的底线，无论你需要，更漂亮，然后会尊重这一点。你可以看到这是如何在这个问题上暴露出来的，评论，应该更容易找到这些东西哈。

Answer 3

应该将printWidth添加到.prettierrc中

​

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

​