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.