Vue 风格指南 强烈推荐：
多个 attribute 的元素应该分多行撰写，每个 attribute 一行。
bad:
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo" />
<MyComponent foo="a" bar="b" baz="c" />
good:
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
/>
<MyComponent
foo="a"
bar="b"
baz="c"
/>
在使用 Prettier 进行代码格式化时，将根据 printWidth 属性设置的值来决定是否换行。
默认的 printWidth 值为 80，当行位置超过此值时，代码会自动换行。然而，这导致部分元素的 attribute 被换行书写，而其他元素保持不变，使得换行条件不一致，从而影响了代码的美观度：
<img
id="logo"
ref="imgref"
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
/>
<MyComponent foo="a" bar="b" baz="c" />
修改 .prettierrc.json 的配置，增加 singleAttributePerLine 选项，如下：
{
"singleAttributePerLine": true
}
该选项将强制在 HTML、Vue 和 JSX 中每行执行一个属性。文章来源：https://www.toymoban.com/news/detail-567417.html
🎉 漂亮！文章来源地址https://www.toymoban.com/news/detail-567417.html
<template>
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
title="Vue Logo"
/>
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
/>
</template>
到了这里，关于【Tools】Prettier 在 Vue 中对每个属性进行自动换行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
