Vue 脚本标签中更漂亮的破坏函数

Question

我想在一行中保留一个 if 函数而不使用三元 if 但更漂亮的格式破坏了它，我在更漂亮的文档中找不到该选项

tag script 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>

我正在使用 Nuxt(VueJS)

我更漂亮的配置：

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

Answer 1

您使用带有 VScode 扩展的 Prettier 还是通过 ESlint？顺便说一句，我推荐第二种方法，因为 .
这还将为您提供特定行或代码块的 linting + formatting，因此总体上更加灵活。

如果您使用的是第一种方法，那么您可以尝试 this Range ignore 方法。

您可以使用 // prettier-ignore to ignore the whole thing but I doubt you can enable it back afterwards. As you saw in the options，但没有任何帮助。但是 Prettier 的目的是固执己见，因此您没有 ESlint 可以为 table.

带来的全部灵活性是合理的。

有一些准则，例如 from Airbnb，这很好，但是您需要整个团队就特定的编写方式达成一致。这违背了 Prettier 的目的：使用它并一劳永逸地停止在每个 Pull Request 上讨论样式，因此为什么它固执己见并且没有那么多可配置选项。

一个简单的（但 meh hack）将设置 "printWidth": 200，这可能会以某种方式工作但不是很灵活。

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

Vue 脚本标签中更漂亮的破坏函数

Prettier breaking functions in Vue script tag

format

vue.js

nuxt.js

prettier