Prettier在Vue中对每个属性进行自动换行

Vue 风格指南中强烈建议：多个 attribute 的元素应该分多行撰写，每个 attribute 一行。

我们在使用Prettier时，默认情况下会对超出printWidth的内容进行换行，这就导致了有的元素属性换行了，有的却排成了一行，非常不美观。

就像这样：

<template>
  <img src="https://vuejs.org/images/logo.png" alt="Vue Logo" />
</template>

可以通过配置Prettier的属性来解决：

"singleAttributePerLine": true

这项属性会在 HTML、Vue 和 JSX 中每行强制使用单个属性。

完美！

<template>
  <img
    src="https://vuejs.org/images/logo.png"
    alt="Vue Logo" />
</template>