Prettier不会根据打印宽度自动修复更长的Tailwind CSS类名堆栈。

huangapple go评论69阅读模式
英文:

Prettier won't auto-fix longer Tailwind CSS class name stack according to print width

问题

翻译:

Prettier不是应该根据打印宽度自动修复较长的Tailwind CSS类名堆栈吗?

行为

<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" 
/>
英文:

Isn't Prettier supposed to auto-fix longer Tailwind CSS class name stack according to print width?

Behaviour

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

Expected

<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

得分: 0

在进一步研究后,我意识到我遇到的问题已经被 Prettier 团队解决了。

在深入研究 Prettier 的问题和文档后,我发现团队最初尝试为处理像 Tailwind 这样导致元素上存在大量类的 CSS 库提供解决方案。然而,他们在确定在哪里将类列表拆分为多行的启发式方法上遇到了困难,因此他们决定回退到这个特定的功能。在其中一个问题中,他们提到:“我们用于确定在哪里将类列表拆分为多行的启发式方法无法始终产生良好的结果。我们仍在考虑更好的方法来格式化具有大量类的 HTML。”

有关更多信息,请参考以下资源:

尽管我寻求的功能没有按预期工作,但值得关注 Prettier 问题跟踪器中正在进行的讨论。团队似乎正在积极考虑改进具有大量类的 HTML 格式的替代方法。随着未来版本的推出,我们可能会在这个领域看到进展。

英文:

Upon further research, I realized that the issue I was facing has already been addressed by the Prettier team.

After delving into Prettier's issues and documentation, I discovered that the team had initially attempted to provide a solution for handling CSS libraries like Tailwind that result in a large number of classes on elements. However, they encountered difficulties with the heuristics used to determine where to split the class list onto multiple lines, and as a result, they decided to revert back on this particular feature. They mentioned in one of the issues that "our heuristics for where to split the class list on to multiple lines were unable to consistently produce good results. We’re still considering better ways to format HTML with lots of classes."

For further information, you can refer to the following resources:

Although the feature I was seeking didn't work out as intended, it's worth keeping an eye on the ongoing discussions in the Prettier issue tracker. The team seems to be actively considering alternative approaches to improve the formatting of HTML with a large number of classes. With future releases, we may see advancements in this area.

huangapple
  • 本文由 发表于 2023年3月12日 17:55:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/75712335.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定