useVueConsistentDefinePropsDeclaration (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.3.11
Diagnostic Category: lint/style/useVueConsistentDefinePropsDeclaration
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/define-props-declaration

How to configure

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

Description

Enforce a consistent declaration style for Vue’s defineProps macro.

Vue accepts two ways to declare component properties: a TypeScript type passed between angle brackets, or a runtime object passed as an argument. This rule enforces one style throughout the project. The default style is type.

Examples

Invalid

1
<script setup lang="ts">
2
const props = defineProps({
3
  kind: { type: String },
4
});
5
</script>

code-block.vue:2:15 lint/style/useVueConsistentDefinePropsDeclaration ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This defineProps declaration uses runtime declaration.
  
    1 │ <script setup lang="ts">
  > 2 │ const props = defineProps({
      │               ^^^^^^^^^^^^^
  > 3 │   kind: { type: String },
  > 4 │ });
      │ ^^
    5 │ </script>
    6 │ 
  
  ℹ It should be defined using type declaration like defineProps<...>().

Valid

1
<script setup lang="ts">
2
const props = defineProps<{
3
  kind: string;
4
}>();
5
</script>

Options

`style`

Selects type or runtime declarations. Defaults to type.

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useVueConsistentDefinePropsDeclaration": {
6
          "level": "on",
7
          "options": {
8
            "style": "runtime"
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

With runtime, a type-based declaration is invalid:

1
<script setup lang="ts">
2
const props = defineProps<{ kind: string }>();
3
</script>

code-block.vue:2:15 lint/style/useVueConsistentDefinePropsDeclaration ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This defineProps declaration uses type declaration.
  
    1 │ <script setup lang="ts">
  > 2 │ const props = defineProps<{ kind: string }>();
      │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ It should be defined using runtime declaration like defineProps(...).

A runtime declaration is valid:

1
<script setup lang="ts">
2
const props = defineProps({ kind: { type: String } });
3
</script>