如何解决在Prettier中,如何防止HTML结束标记的“>”字符放在新行上?
很长一段时间以来,我与Vue.js一起遇到Prettier的一个特殊问题。似乎没有解决办法,因此我在这里最后提出了一个问题。如果您的HTML代码嵌套得很深,并且您在Prettier中启用了printWidth
属性(默认情况下启用),则会发生此问题。
更漂亮的2.1.2 Playground link
--parser vue
输入:
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link class="xyz-class abc-class" to="/home">Home</router-link>
</li>
<li>
<router-link class="xyz-class abc-class" to="/posts">Posts</router-link>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
输出:
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link class="xyz-class abc-class" to="/home"
>Home</router-link
>
</li>
<li>
<router-link class="xyz-class abc-class" to="/posts"
>Posts</router-link
>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
预期的行为:
在我看来,这些方法中的任何一个都将是整洁的。
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link class="xyz-class abc-class" to="/home">
Home
</router-link>
</li>
<li>
<router-link class="xyz-class abc-class" to="/posts">
Posts
</router-link>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
OR
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link
class="xyz-class abc-class"
to="/home"
>Home</router-link>
</li>
<li>
<router-link
class="xyz-class abc-class"
to="/posts"
>Posts</router-link>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
我在这里缺少一些可以禁用/启用以防止这种情况的选项吗?如果是这样,请指导。
解决方法
我找到了解决此问题的方法。通过搜索将其留在这里。
将选项--html-whitespace-sensitivity
设置为ignore
,您将获得以下输出:
<template>
<div>
<div>
<div>
<div>
<div>
<ol>
<li>
<router-link class="xyz-class abc-class" to="/home">
Home
</router-link>
</li>
<li>
<router-link class="xyz-class abc-class" to="/posts">
Posts
</router-link>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</template>
尽管不建议这样做,因为空格格式设置可能会导致诸如文本和内容之间的额外间距之类的问题,这可能会影响UI设计的一致性。
此处的更多信息:https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
感谢在GitHub上的回复:https://github.com/prettier/prettier/issues/9381#issuecomment-707156908
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。