pageClass | sidebarDepth | title | description | since |
---|---|---|---|---|
rule-details |
0 |
vue/prefer-prop-type-boolean-first |
enforce `Boolean` comes first in component prop types |
v8.6.0 |
enforce
Boolean
comes first in component prop types
- 💡 Some problems reported by this rule are manually fixable by editor suggestions.
When declaring types of a property in component, we can use array style to accept multiple types.
When using components in template,
we can use shorthand-style property if its value is true
.
However, if a property allows Boolean
or String
and we use it with shorthand form in somewhere else,
different types order can introduce different behaviors:
If Boolean
comes first, it will be true
; if String
comes first, it will be ""
(empty string).
See this demo.
<script>
export default {
props: {
// ✓ GOOD
a: Boolean,
b: String,
c: [Boolean, String],
d: {
type: [Boolean, String]
},
// ✗ BAD
e: [String, Boolean],
f: {
type: [String, Boolean]
}
}
}
</script>
This rule was introduced in eslint-plugin-vue v8.6.0