Prettier breaking functions in Vue script tag

Question

I would like to keep a if function in one line without using ternary if but prettier format breaks it, I didn't find a option for that in prettier documentation

tag script inside .vue file
WANTED OUTPUT

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

prettier format

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

I'm working with Nuxt(VueJS)

my prettier config:

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

score 1 · Accepted Answer · answered May 23 '22 at 16:57

You're using Prettier with a VScode extension or via ESlint? I recommend the second approach btw, for a nice linter + formatter combo.
This will also give you the right to disable linting + formatting of a specific line or block of code, so quite more flexiible overall.

If you're using the first approach, then you could maybe try this Range ignore approach.

You could use // prettier-ignore to ignore the whole thing but I doubt you can enable it back afterwards. As you saw in the options, there is nothing that can help there. But the purpose of Prettier is to be opinionated so it's legit that you don't have the whole flexibility that ESlint could bring to the table.

There are some guidelines like the one from Airbnb, this is great but then you need your whole team to agree on a specific way of writing things. Which defeats the purpose of Prettier: use it and stop discussing the style on each Pull Request once and for all, hence why it's opinionated and have not that much configurable options.

A simple (yet meh hack) would be to set "printWidth": 200, this may somehow work but not really flexible.

TLDR: use an ESlint + Prettier combo (without the VScode extension) for a fully fledged flexible configuration or let Prettier do it's opinionated formatting.

Prettier breaking functions in Vue script tag

1 Answers1