VSCode Prettier 和 vue 混淆格式

如何解决VSCode Prettier 和 vue 混淆格式

使用此代码

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

哪里更漂亮不抱怨。这是预期的行为还是 VSCode 中的错误？

解决方法

这是预期的行为。 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>

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