Prettier不是应该根据打印宽度自动修复更长的Tailwind CSS类名堆栈吗？
- Next.js项目：Github，package.json，.eslintrc.js，.prettierrc.js，示例行
- Visual Studio代码：ESLint、Prettier、Tailwind CSS IntelliSense、settings.json
行为
<input
id="helloInput"
placeholder="Type in hello"
onChange={(e) => setText(e.target.value)}
type="text"
className="focus:shadow-outline mb-3 w-60 appearance-none rounded border border-purple-700 py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none dark:bg-slate-600 dark:text-gray-300"
/>预期
<input
id="helloInput"
placeholder="Type in hello"
onChange={(e) => setText(e.target.value)}
type="text"
className="focus:shadow-outline mb-3 w-60 appearance-none rounded border
border-purple-700 py-2 px-3 leading-tight text-gray-700
shadow focus:outline-none dark:bg-slate-600
dark:text-gray-300"
/>
1条答案
按热度按时间k2arahey1#
经过进一步研究，我意识到我面临的问题已经被Prettier团队解决了。
在深入研究Prettier的问题和文档之后，我发现团队最初试图提供一个解决方案来处理CSS库，比如Tailwind，这些库导致元素上的大量类。然而，他们在确定将类列表拆分到多行的位置时遇到了困难，因此，他们决定恢复这个特定的特性。他们在其中一个问题中提到，“我们的启发式方法无法始终如一地产生良好的结果。我们仍在考虑更好的方法来格式化HTML与许多类。
有关详细信息，您可以参考以下资源：
虽然我正在寻找的功能没有按预期工作，但值得关注Prettier问题跟踪器中正在进行的讨论。该团队似乎正在积极地考虑替代方法来改进HTML的格式与大量类。在未来的版本中，我们可能会看到这方面的进步。