useVueConsistentPropNameCasing (JavaScript)

Language JavaScript (and super languages)

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.6.5
• Diagnostic Category: lint/nursery/useVueConsistentPropNameCasing
• This rule doesn’t have a fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Inspired from vue/prop-name-casing

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentPropNameCasing": "error"
      }
    }
  }
}

Description

Enforce a consistent casing style for prop names in Vue components.

Vue converts prop names between camelCase and kebab-case automatically, so a prop declared as greetingText can be passed in a template as greeting-text. The Vue style guide recommends declaring prop names in camelCase, the usual naming style for JavaScript variables. Mixing naming styles makes props harder to find and to use.

The rule checks props declared with the props option, defineProps(), and TypeScript types passed to defineProps().

Names written only with characters from writing systems without uppercase and lowercase letters, such as 漢字, are accepted in both styles. Names that mix those characters with Latin letters are reported. Names that start with _ or $, or that contain other symbols, don’t follow either style.

Examples

Invalid

<script>
export default {
  props: {
    greeting_text: String,
  },
};
</script>

code-block.vue:4:5 lint/nursery/useVueConsistentPropNameCasing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The prop name greeting_text isn't in camelCase.
  
    2 │ export default {
    3 │   props: {
  > 4 │     greeting_text: String,
      │     ^^^^^^^^^^^^^
    5 │   },
    6 │ };
  
  ℹ Using one naming style for all props makes them easier to find and to use.
  
  ℹ Rename the prop to camelCase.
  
  ℹ 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.
  

<script setup>
defineProps(["greeting-text"]);
</script>

code-block.vue:2:14 lint/nursery/useVueConsistentPropNameCasing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The prop name greeting-text isn't in camelCase.
  
    1 │ <script setup>
  > 2 │ defineProps(["greeting-text"]);
      │              ^^^^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Using one naming style for all props makes them easier to find and to use.
  
  ℹ Rename the prop to camelCase.
  
  ℹ 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.
  

<script setup lang="ts">
defineProps<{ GreetingText: string }>();
</script>

code-block.vue:2:15 lint/nursery/useVueConsistentPropNameCasing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The prop name GreetingText isn't in camelCase.
  
    1 │ <script setup lang="ts">
  > 2 │ defineProps<{ GreetingText: string }>();
      │               ^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Using one naming style for all props makes them easier to find and to use.
  
  ℹ Rename the prop to camelCase.
  
  ℹ 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.
  

Valid

<script setup lang="ts">
defineProps<{ greetingText: string; size: number }>();
</script>

Options

casing

Default: "camelCase"

The casing that prop names must follow: "camelCase" or "snake_case".

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentPropNameCasing": {
          "level": "on",
          "options": {
            "casing": "snake_case"
          }
        }
      }
    }
  }
}

Invalid

<script setup>
defineProps({
  greetingText: String,
});
</script>

code-block.vue:3:3 lint/nursery/useVueConsistentPropNameCasing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The prop name greetingText isn't in snake_case.
  
    1 │ <script setup>
    2 │ defineProps({
  > 3 │   greetingText: String,
      │   ^^^^^^^^^^^^
    4 │ });
    5 │ </script>
  
  ℹ Using one naming style for all props makes them easier to find and to use.
  
  ℹ Rename the prop to snake_case.
  
  ℹ 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.
  

Valid

<script setup>
defineProps({
  greeting_text: String,
});
</script>

ignore

Default: []

A list of prop names that aren’t checked. Names are matched exactly.

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueConsistentPropNameCasing": {
          "level": "on",
          "options": {
            "ignore": [
              "greeting_text"
            ]
          }
        }
      }
    }
  }
}

Valid

<script setup>
defineProps({
  greeting_text: String,
});
</script>

See Also

• If you want to enforce hyphenated prop names in templates, see useVueHyphenatedAttributes.

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground