Rule Proposal: Component props sort order #630
Description
Please describe what the rule should do:
This rule should enforce sorting of component props. I would propose that you could set it to sort:
- Alphabetically ascending and descending
- Required props first or last
Ideally this rule would be an auto-fixing rule, so the individual developer wouldn't necessarily need to worry about manually ordering their props.
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:
Sort props alphabetically, Ascending:
export default {
props: {
ant: {
type: String,
required: false,
default: '',
},
bird: {
type: Boolean,
required: true,
},
cat: {
type: String,
required: true,
},
elephant: {
type: Boolean,
required: false,
default: false,
},
},
}Sort props alphabetically, descending:
export default {
props: {
elephant: {
type: Boolean,
required: false,
default: false,
},
cat: {
type: String,
required: true,
},
bird: {
type: Boolean,
required: true,
},
ant: {
type: String,
required: false,
default: '',
},
},
}Sort props alphabetically, ascending, required first:
export default {
props: {
bird: {
type: Boolean,
required: true,
},
cat: {
type: String,
required: true,
},
ant: {
type: String,
required: false,
default: '',
},
elephant: {
type: Boolean,
required: false,
default: false,
},
},
}Sort props alphabetically, descending, required first:
export default {
props: {
cat: {
type: String,
required: true,
},
bird: {
type: Boolean,
required: true,
},
elephant: {
type: Boolean,
required: false,
default: false,
},
ant: {
type: String,
required: false,
default: '',
},
},
}Sort props alphabetically, ascending, required last:
export default {
props: {
ant: {
type: String,
required: false,
default: '',
},
elephant: {
type: Boolean,
required: false,
default: false,
},
bird: {
type: Boolean,
required: true,
},
cat: {
type: String,
required: true,
},
},
}Sort props alphabetically, descending, required first:
export default {
props: {
elephant: {
type: Boolean,
required: false,
default: false,
},
ant: {
type: String,
required: false,
default: '',
},
cat: {
type: String,
required: true,
},
bird: {
type: Boolean,
required: true,
},
},
}Why should this rule be included?
It would help improve the readability or medium to long property list, making the overall list of props in a component easier to reason about.