VSCode Prettier and vue confusing formatting

Question

With this code

<template>
  <v-toolbar app color="brown darken-4" dark>
    <v-btn color="brown lighten-3" class="hidden-sm-and-down">REGISTRIEREN</v-btn>
  </v-toolbar>
</template>

Prettier suggests this:

  3:62  warning  Replace `>REGISTRIEREN</v-btn` with `⏎······>REGISTRIEREN</v-btn⏎····`  prettier/prettier

But the code than would look like this:

<template>
  <v-toolbar app color="brown darken-4" dark>
    <v-btn color="brown lighten-3" class="hidden-sm-and-down"
      >REGISTRIEREN</v-btn
    >
  </v-toolbar>
</template>

Where prettier does not complain. Is this expected behaviour or a bug in VSCode?

Answer 1

That is expected behaviour. Prettier does a line break after 80 characters or so. And it breaks before the > because if it breaks after, it actually adds a white space, so you might run into display issues later on.

this is correct:

 <v-btn color="brown lighten-3" class="hidden-sm-and-down"
   >REGISTRIEREN</v-btn
 >

this is not (the line break before and after 'REGISTRIEREN' is an actual character):

<v-btn color="brown lighten-3" class="hidden-sm-and-down">
   REGISTRIEREN
</v-btn>

You can customise some of these rules, but I honestly recommend just keeping what comes out of the box - the more you customise, the more things keep breaking during updates etc.