VSCode Prettier 和 vue 混淆格式

Question

使用此代码

<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 建议这样做：

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

但是代码看起来像这样：

<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 不会抱怨。这是预期的行为还是 VSCode 中的错误？

Answer 1

这是预期的行为。 Prettier 在 80 个字符左右后换行。它在> 之前中断，因为如果它在之后中断，它实际上会添加一个空格，因此您以后可能会遇到显示问题。

这是正确的：

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

这不是（'REGISTRIEREN' 前后的换行符是一个实际字符）：

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

您可以自定义其中一些规则，但老实说，我建议您保留开箱即用的内容 - 您自定义的越多，更新期间出现的问题就越多等等。