Why this matters
Adding vertical whitespace can improve readability and scannability in components with many options or complex, multi-line definitions. It visually separates distinct blocks of options.
Consider adding one empty line between multi-line properties (like complex props, computed, methods, watch objects) within the component options, especially in large components.
Adding vertical whitespace can improve readability and scannability in components with many options or complex, multi-line definitions. It visually separates distinct blocks of options.
Side-by-side examples engineers can pattern-match during review.
// BAD (Potentially hard to read in large components)
export default {
props: {
propA: { /* multi-line */ },
propB: String
},
computed: {
compA() { /* multi-line */ },
compB() { /* multi-line */ }
},
methods: {
methodA() { /* multi-line */ }
}
}// GOOD (Improved readability with spacing)
export default {
props: {
propA: { /* multi-line */ },
propB: String
},
computed: {
compA() { /* multi-line */ },
compB() { /* multi-line */ }
},
methods: {
methodA() { /* multi-line */ }
}
}props: {
value: { /*...*/ },
focused: { /*...*/ }
},
computed: {
formattedValue() { /*...*/ },
inputClasses() { /*...*/ }
}props: {
value: { /*...*/ },
focused: { /*...*/ }
},
computed: {
formattedValue() { /*...*/ },
inputClasses() { /*...*/ }
}From the same buckets as this rule.
Check if loops use equality operators (== or !=) in termination conditions. These can lead to infinite loops if the condition is never met exactly. Instead, use relational operators like < or > for safer loop termination.