reactjs - 更漂亮的代码格式不会在 JSX 或 HTML 中拆分类名

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">

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

有没有办法让 Prettier 再次拆分这些行？如果没有，是否有其他解决方案？

谢谢!

Answer 1

Prettier 目前没有直接针对此问题的解决方案。但是here Tailwind 的创建者就是为了解决这个问题而做的。

TLDR:使用 Headwind在 VSCode 中或仅在编辑器中启用 Word Wrap