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 中每行执行一个属性。
🎉 漂亮!
<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>