如何在 React 中配置 Prettier 以换行 className 属性

Question

This is the original code with Prettier applied:这是应用了 Prettier 的原始代码：

<div
  role="menubar"
  className="absolute top-0 left-0 z-50 h-0 mt-10 grid grid-cols-3 gap-x-3 gap-y-5 "
>
</div>

This is my expected code result:这是我预期的代码结果：

<div
  role="menubar"
  className="absolute top-0 left-0 z-50 
             h-0 mt-10 grid grid-cols-3 
             gap-x-3 gap-y-5 "
>
</div>

Could anyone recommend the solution?谁能推荐解决方案？

Answer 1

Check out the Print Width attribute in prettier.查看 prettier 中的Print Width属性。

It allows you to specify after how many letters the line should wrap.它允许您指定该行应该在多少个字母之后换行。