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的格式与大量类。在未来的版本中,我们可能会看到这方面的进步。