Prettier - 将 html 类分解为多行

Question

我试图在 vscode 上使用更漂亮的格式化程序插件来实现一种行为，当 html 标签有多个类时，它会破坏每个类的行中的每个类，但只有当该类行达到“自动换行列”限制时（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,
}