[英]Prettier - Break html classes in multiple lines
I'm trying to achieve a behavior using prettier formatter plugin on vscode that, when a html tag has several classes it breaks every class in a line for each , but only when that class line reach the "Word Wrap Column" limit (vscode config).我正在尝试在 vscode 上使用更漂亮的格式化程序插件实现一种行为,当 html 标记有多个类时,它会在每个 class 行中打破每个class 行达到“自动换行列”限制(vscode 配置). Is it possible?
是否可以?
Current behavior当前行为
<div | - LINE LIMIT
class="m-10 flex min-h-screen items-center justify-center rounded-2xl border-2 border-red-500
bg-indigo-500 p-10 shadow-2xl"
></div>
<div class="flex items-center justify-center"></div>
Expected behavior预期行为
<div | - LINE LIMIT
class="
m-10
flex
min-h-screen
items-center
justify-center
rounded-2xl
border-2
border-red-500
bg-indigo-500
p-10
shadow-2xl
"
></div>
<div class="flex items-center justify-center"></div>
You should add printWidth
to.prettierrc您应该将
printWidth
添加到.prettierrc
{ "printWidth": 100, "endOfLine": "lf", "semi": true, "singleQuote": true, }
We can use Prettier 2.4.我们可以使用 Prettier 2.4。 It is Disabling in Prettier 2.5
它在 Prettier 2.5 中被禁用
Disabling "smart formatting" of HTML class attribute禁用 HTML class 属性的“智能格式化”
2.5.0 release notes 2.5.0 发行说明
Collapse HTML class attributes onto one line ( #11827 by @jlongster )将 HTML class 属性折叠到一行( #11827 by @jlongster )
<!-- Input -->
<div
class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>
<!-- Prettier 2.4 -->
<div
class="
SomeComponent__heading-row
d-flex
flex-column flex-lg-row
justify-content-start justify-content-lg-between
align-items-start align-items-lg-center
"
></div>
<!-- Prettier 2.5 -->
<div
class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>
As today (Prettier 3.5) you just need to break the line your self wherever you needed, Prettier then will respect that.就像今天(Prettier 3.5)一样,您只需要在需要的地方打破自己的界限,然后 Prettier 就会尊重这一点。 You could see how this came to light in this issue comment , it should be easier to find this stuff ha.
您可以在此问题评论中看到这是如何发现的,应该更容易找到这些东西哈。
Follow following steps to avoid Break html classes in multiple lines.请按照以下步骤避免在多行中中断 html 类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.