VSCode 更漂亮和 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 个字符左右后换行。它在 > 之前中断，因为如果它在之后中断，它实际上会添加一个白色 space，因此您稍后可能运行会遇到显示问题。

这是正确的：

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

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

VSCode 更漂亮和 vue 令人困惑的格式

VSCode Prettier and vue confusing formatting

vue.js

visual-studio-code

prettier