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?

Thomas Kuhlmann · Accepted Answer · 2021-03-25 14:54:36Z

3

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.

answered Mar 25, 2021 at 14:54

Thomas Kuhlmann

1,0139 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thorn0 Over a year ago

This behavior of Prettier is also explained here: prettier.io/blog/2018/11/07/…

theking2 Over a year ago

Thanks for the link @thorn̈. I was aware of "significant" white space but thought it a thing of the dark (xhtml/html 4) ages.

Collectives™ on Stack Overflow

VSCode Prettier and vue confusing formatting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related