英文:
Prettier won't auto-fix longer Tailwind CSS class name stack according to print width
问题
翻译:
Prettier不是应该根据打印宽度自动修复较长的Tailwind CSS类名堆栈吗?
- Next.js 项目:Github,package.json,.eslintrc.js,.prettierrc.js,示例行
- Visual Studio Code: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"
/>
英文:
Isn't Prettier supposed to auto-fix longer Tailwind CSS class name stack according to print width?
- Next.js Project: Github, package.json, .eslintrc.js, .prettierrc.js, example line
- Visual Studio Code: ESLint, Prettier, Tailwind CSS IntelliSense, settings.json
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。”
有关更多信息,请参考以下资源:
- 问题 13789:Prettier 不使用特定 PrintWidth 包装 html 类
- 问题 10918:禁用 HTML 类属性的“智能格式化”
- 问题 7863:P2.x - 按前缀分组 HTML 类而不是强制到一行
- 博客文章:将 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:
- Issue 13789: Prettier don't wrap html classes with specific PrintWidth
- Issue 10918: Disabling "smart formatting" of HTML class attribute
- Issue 7863: P2.x - Group HTML classes by prefix instead of forcing onto one line
- Blog post: Collapse HTML class attributes onto one line
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论