# san/max-attributes-per-line
enforce the maximum number of attributes per line
- ⚙️ This rule is included in all of
"plugin:san/strongly-recommended"
and"plugin:san/recommended"
. - 🔧 The
--fix
option on the command line (opens new window) can automatically fix some of the problems reported by this rule.
Limits the maximum number of attributes/properties per line to improve readability.
# 📖 Rule Details
This rule aims to enforce a number of attributes per line in templates. It checks all the elements in a template and verifies that the number of attributes per line does not exceed the defined maximum. An attribute is considered to be in a new line when there is a line break between two attributes.
There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 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>
# 🔧 Options
{
"san/max-attributes-per-line": ["error", {
"singleline": 1,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}]
}
singleline
(number
) ... The number of maximum attributes per line when the opening tag is in a single line. Default is1
.multiline.max
(number
) ... The max number of attributes per line when the opening tag is in multiple lines. Default is1
. This can be{ multiline: 1 }
instead of{ multiline: { max: 1 }}
if you don't configureallowFirstLine
property.multiline.allowFirstLine
(boolean
) ... Iftrue
, it allows attributes on the same line as that tag name. Default isfalse
.
# "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>