Prettier 代码格式不会在 JSX 或 HTML 中拆分 classNames

Question

我启用了 Prettier VSCode 扩展，并且我的本地 .prettierrc 文件具有"printWidth": 70选项之一，但是，当我的 JSX（或纯 HTML）文件中有一长串类名时，Prettier 不遵守该设置printWidth并让列表的课程无限期地进行而不会破坏线路。这只是一个问题，因为我使用 Headwind，它是 Tailwind 类排序扩展，运行时Headwind:Sort它会获取我的多行类并将它们放回一行。跑步Prettier:Format应该会再次把这条长长的队伍分开，但可惜的是，事实并非如此。

起始代码示例：

<div className="flex flex-col w-full p-6 border-r-2 items-start
w-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100">

然后Headwind:Sort运行，将所有类放在一条长线上：

<div className="flex flex-col w-full p-6 border-r-2 items-start w-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100">

然后，即使我的选项设置为 70 个字符，运行Prettier:Format所有代码后仍然是一行一行。printWidth

有没有办法让 Prettier 再次分割这些线？如果没有，还有其他解决方案吗？

谢谢你！

Answer 1

目前 Prettier 还没有直接解决这个问题的方法。但这是Tailwind 的创建者为解决这个问题所做的事情。

TLDR：在 VSCode 中使用Headwind或在编辑器中启用自动换行