Closed
Description
Please describe what the rule should do:
Enforce new lines between multi-line properties in Vue components.
What category of rule is this? (place an "X" next to just one item)
[x] Enforces code style
[ ] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)
Provide 2-3 code examples that this rule will warn about:
// Good! - easy to find where new properties begin.
name: 'component-name',
props: {
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
},
label: String,
icon: String
},
computed: {
formattedValue: function () {
// ...
// ...
// ...
// ...
},
inputClasses: function () {
// ...
// ...
// ...
// ...
}
},
methods: {
methodA: function () {
// ...
// ...
// ...
},
methodB: function () {
// ...
// ...
// ...
}
}
// Bad - hard to read when they are long properties and all crammed together.
name: 'component-name',
props: {
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
},
label: String,
icon: String
},
computed: {
formattedValue: function () {
// ...
// ...
// ...
// ...
},
inputClasses: function () {
// ...
// ...
// ...
// ...
}
},
methods: {
methodA: function () {
// ...
// ...
// ...
},
methodB: function () {
// ...
// ...
// ...
}
}Why should this rule be included in ESLint (instead of a plugin)?
The Vue docs suggest to add new lines between multi-line properties to help readability (and navigation in some cases) of the code. It is flagged in the docs as recommended, and I believe as a code style and way to make components consistent, it would make sense to be in Priority C - Recommended ruleset.