prettier 2.3 版本中类属性的基于前缀的多行格式

Posted 2023-03-07

【中文标题】prettier 2.3 版本中类属性的基于前缀的多行格式

【英文标题】：Prefix-based multiline formatting for the class attribute in version 2.3 of prettier

【发布时间】：2021-08-16 05:14:15

【问题描述】：

我刚刚将一个顺风项目升级到 Prettier v2.3 只是为了这个功能，而在我的一生中，我似乎无法在文档中找到如何启用它。 找到讨论它的博文here. 和PR here

【参考方案1】：

我的猜测是您的顺风项目正在使用 JSX/TSX，它使用属性 className 而不是 class。为 className 属性实现此功能目前是在更漂亮的 GitHub 存储库上的 discussed。

PS：几个月来，我个人一直希望在我的项目中使用多行 Tailwind，所以我使用了一个小型实用程序函数并将其放在一个名为 tailwind.ts 的文件中。

export default function tailwind(...args: string[]) 
    return args.join(" ")

您现在可以在任何 JSX 或 TSX 文件中执行以下操作：

import tailwind from "your/file/path/tailwind.ts"

// some react function ...

<span
    className=tailwind(
        "font-semibold",
        "underline",
        "relative",
        "group",
        "cursor-pointer",
        "text-black",
        "dark:text-gray-300"
    )
        >
// ... end of file

// Prettier will format this to the above if the line exceeds your line length

优点是现在可以很容易地注释掉每一行。缺点是您有很多开销（每次都有很多额外的引号和逗号 + 导入）。不确定你是否喜欢这种方法，但现在它可能必须在 Prettier 为 className 实现它之前实现它@