vue/max-attributes-per-line
enforce the maximum number of attributes per line
- ⚙️ This rule is included in all of
"plugin:vue/vue3-strongly-recommended"
,*.configs["flat/strongly-recommended"]
,"plugin:vue/strongly-recommended"
,*.configs["flat/vue2-strongly-recommended"]
,"plugin:vue/vue3-recommended"
,*.configs["flat/recommended"]
,"plugin:vue/recommended"
and*.configs["flat/vue2-recommended"]
. - 🔧 The
--fix
option on the command line 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
json
{
"vue/max-attributes-per-line": ["error", {
"singleline": {
"max": 1
},
"multiline": {
"max": 1
}
}]
}
singleline.max
(number
) ... The number of maximum attributes per line when the opening tag is in a single line. Default is1
. This can be{ singleline: 1 }
instead of{ singleline: { max: 1 }}
.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 }}
.
"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>
👫 Related Rules
📚 Further Reading
🚀 Version
This rule was introduced in eslint-plugin-vue v3.12.0