如何让prettier忽略标签属性(printWidth)自动换行?

  • Z时代
  • 2024-03-16
  • 分类：IT

有一个问题困扰我很久：

在使用的vue的时候，我希望一些元素的属性换行显示而另一些元素的属性不换行，以达到最佳的阅读效果：

例如这样：

// 有些元素 我希望多行显示 每行显示一个
<multie-line
    v-for="child in item.children"
    :key="child.path"
    :is-nest="true"
    :item="child"
    class="nest-menu"
/>
// 有些元素 我希望不换行显示
<signle-line attr1="1" attr2="2" >single-text</single>

但是使用prettier格式化代码的时候就变成了 要么全部换行（配置 singleAttributePerLine: true） 要么只能根据printwidth的长度来换行。当文件内容多了后，格式化出来比较难看。

我想要使用prettier的其它格式化功能，但不想让它非常单一的决定元素属性换行。

不知是否可以实现？或者是否有其它格式化工具可以实现？

回答：

按照 printwidth 来折行就行了，如果超出某一个长度就把属性全部折行。设置一个合适的 printwidth 宽度就好了。
不要考虑说 当文件内容多了后，格式化出来比较难看。

因为你怎么去评定这个文件内容多是有多少多？有些组件可能五六百行的代码，但是模板可能只有几行，剩下的都是 JS 代码，有些组件可能五六百行里有100多行的模板代码。
你是能知道好看不好看，代码可不知道这个好不好看，只会按照你预设好的规则来执行。

另外就是 prettier 的标语你是需要去理解的：

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

以上是 如何让prettier忽略标签属性(printWidth)自动换行? 的全部内容， 来源链接： utcz.com/p/934349.html

回到顶部