Vue script标签中更漂亮的断点函数

Question

我想在一行中保留一个if函数，而不使用三元if，但美观的格式破坏了它，我没有在美观的文档中找到这个选项

标记脚本inside.vue文件
需要输出

<script>
export default {
methods: {
changeSlide(slideIndex) {
if (slideIndex >= this.slides.length) { slideIndex = 0 }
}
},       
}
</script>

漂亮格式

<script>
export default {
methods: {
changeSlide(slideIndex) {
if (slideIndex >= this.slides.length) {
slideIndex = 0
}
}
},       
}
</script>

我正在使用next (VueJS)

my prettier config:

{
"semi": false,
"singleQuote": true,
"tabWidth": 4,
"useTabs": true,
"printWidth": 120
}

Answer 1

你是用VScode扩展还是通过ESlint使用Prettier ?顺便说一句，我推荐第二种方法，用于良好的linter+formatter组合。
这也将使您有权禁用特定行或代码块的linting + formatting，因此总体上更加灵活。

---

如果你使用第一种方法，那么你可以尝试这个范围忽略方法。

您可以使用// prettier-ignore来忽略整个事情，但我怀疑您可以在之后启用它。正如您在选项中看到的那样，没有什么可以帮助您。但Prettier的目的是固执己见，所以你没有ESlint所能带来的全部灵活性是合法的。

有一些像Airbnb这样的指导方针，这很好，但是你需要你的整个团队在一个特定的写作方式上达成一致。这违背了Prettier的目的:使用它并停止讨论每个Pull Request的样式，这就是为什么它是固执己见的，没有那么多可配置的选项。

一个简单的(但mehhack)是设置"printWidth": 200，这可能在某种程度上工作，但不是真正灵活。

---

TLDR:使用ESlint + Prettier组合(没有VScode扩展)进行完全成熟的灵活配置，或者让Prettier进行自以为是的格式化。