useVueBooleanPropTypeFirst (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueBooleanPropTypeFirst
This rule has an unsafe fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/prefer-prop-type-boolean-first

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueBooleanPropTypeFirst": "error"
6
      }
7
    }
8
  }
9
}

Description

Require Boolean to be the first type of Vue props that accept several types.

A prop can accept several types by listing them in an array, such as [Boolean, String]. When a Boolean prop is written in a template without a value, as in <MyComponent disabled />, Vue sets it to true. However, if String comes before Boolean in the list, Vue sets the prop to an empty string instead. Writing Boolean first makes such a prop behave the same as a prop that only accepts Boolean.

This rule checks props declared through the props option and defineProps().

Examples

Invalid

1
<script>
2
export default {
3
  props: {
4
    disabled: [String, Boolean],
5
  },
6
};
7
</script>

code-block.vue:4:24 lint/nursery/useVueBooleanPropTypeFirst  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Boolean isn't the first type of this prop.
  
    2 │ export default {
    3 │   props: {
  > 4 │     disabled: [String, Boolean],
      │                        ^^^^^^^
    5 │   },
    6 │ };
  
  ℹ When String comes before Boolean, a prop written in a template without a value, such as <MyComponent disabled />, is set to an empty string instead of true.
  
  ℹ Move Boolean to the start of the list of types.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Move Boolean to the start of the list.
  
    2 2 │   export default {
    3 3 │     props: {
    4   │ - ····disabled:·[String,·Boolean],
      4 │ + ····disabled:·[Boolean,·String],
    5 5 │     },
    6 6 │   };

1
<script setup>
2
defineProps({
3
  disabled: { type: [String, Number, Boolean] },
4
});
5
</script>

code-block.vue:3:38 lint/nursery/useVueBooleanPropTypeFirst  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Boolean isn't the first type of this prop.
  
    1 │ <script setup>
    2 │ defineProps({
  > 3 │   disabled: { type: [String, Number, Boolean] },
      │                                      ^^^^^^^
    4 │ });
    5 │ </script>
  
  ℹ When String comes before Boolean, a prop written in a template without a value, such as <MyComponent disabled />, is set to an empty string instead of true.
  
  ℹ Move Boolean to the start of the list of types.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Move Boolean to the start of the list.
  
    1 1 │   <script setup>
    2 2 │   defineProps({
    3   │ - ··disabled:·{·type:·[String,·Number,·Boolean]·},
      3 │ + ··disabled:·{·type:·[Boolean,·String,·Number]·},
    4 4 │   });
    5 5 │   </script>

Valid

1
<script setup>
2
defineProps({
3
  disabled: Boolean,
4
  label: String,
5
  loading: [Boolean, String],
6
  size: { type: [Boolean, String, Number] },
7
});
8
</script>