# san/max-attributes-per-line
限制每行的最大属性数量
- ⚙️ 此规则包含于
"plugin:san/strongly-recommended"和"plugin:san/recommended". - 🔧 命令行 (opens new window)中的
--fix选项可以自动修复此规则报告的一些问题。
限制每行最大的属性数量以提高可读性。
# 📖 规则细节
此规则目的是限制模板中每行的多个属性。它检查模板中的所有元素并验证每行的属性数是否不超过定义的最大值。当两个属性之间有换行符时，一个属性被认为是在一个新行中。
单行情况下可接受的属性数量是可配置的（默认 1），以及多行情况下每行可接受的属性数量（默认 1）。
<template>
<!-- ✓ GOOD -->
<MyComponent lorem="1"/>
<MyComponent
lorem="1"
ipsum="2"
/>
<MyComponent
lorem="1"
ipsum="2"
dolor="3"
/>
<!-- ✗ BAD -->
<MyComponent lorem="1" ipsum="2"/>
<MyComponent
lorem="1" ipsum="2"
/>
<MyComponent
lorem="1" ipsum="2"
dolor="3"
/>
</template>
# 🔧 配置
{
"san/max-attributes-per-line": ["error", {
"singleline": 1,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}]
}
singleline (number) ... 当标签处于一行中时，每行的最大属性数。 默认值为 1。
multiline.max (number) ... 当标签处于多行中时，每行的最大属性数。 默认值为 1。如果未配置allowFirstLine 属性，应该是 { multiline: 1 } 而不是 { multiline: { max: 1 }} 。
multiline.allowFirstLine (boolean) ... 如果为 true，则允许属性与标签位于同一行。 默认为
false。
# "singleline": 3
<template>
<!-- ✓ GOOD -->
<MyComponent lorem="1" ipsum="2" dolor="3" />
<!-- ✗ BAD -->
<MyComponent lorem="1" ipsum="2" dolor="3" sit="4" />
</template>
# "multiline": 2
<template>
<!-- ✓ GOOD -->
<MyComponent
lorem="1" ipsum="2"
dolor="3"
/>
<!-- ✗ BAD -->
<MyComponent
lorem="1" ipsum="2" dolor="3"
sit="4"
/>
</template>
# "multiline": 1, "allowFirstLine": true
<template>
<!-- ✓ GOOD -->
<MyComponent lorem="1"
ipsum="2"
dolor="3"
/>
</template>