useVueMacroVariableName (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/useVueMacroVariableName
• This rule has an unsafe fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Same as vue/require-macro-variable-name

How to configure

biome.json

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

Description

Require specific variable names for the results of defineProps(), defineEmits(), defineSlots(), useSlots() and useAttrs().

Inside <script setup>, the results of defineProps(), defineEmits(), defineSlots(), useSlots() and useAttrs() are stored in variables. When every component uses the same names for these variables, components are easier to read, and searching the codebase for them finds every use.

The variable that stores withDefaults(defineProps(...), ...) is checked like the one that stores defineProps(). Destructured results, such as const { title } = defineProps(), are ignored.

The fix also renames every use of the variable in the script. It is only offered when Biome can tell that nothing outside the script uses the variable, such as the template, and when no other variable in the same component would get the same name.

Examples

Invalid

<script setup>
const propsDefined = defineProps({ msg: String });
</script>

code-block.vue:2:7 lint/nursery/useVueMacroVariableName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The result of defineProps() is stored in propsDefined instead of props.
  
    1 │ <script setup>
  > 2 │ const propsDefined = defineProps({ msg: String });
      │       ^^^^^^^^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Using the same variable name for this result in every component makes components easier to read and search.
  
  ℹ Rename the variable to props.
  
  ℹ 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: Rename the variable to props.
  
    1 1 │   <script setup>
    2   │ - const·propsDefined·=·defineProps({·msg:·String·});
      2 │ + const·props·=·defineProps({·msg:·String·});
    3 3 │   </script>
    4 4 │   
  

<script setup>
const emits = defineEmits(["update:msg"]);
</script>

code-block.vue:2:7 lint/nursery/useVueMacroVariableName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The result of defineEmits() is stored in emits instead of emit.
  
    1 │ <script setup>
  > 2 │ const emits = defineEmits(["update:msg"]);
      │       ^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Using the same variable name for this result in every component makes components easier to read and search.
  
  ℹ Rename the variable to emit.
  
  ℹ 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: Rename the variable to emit.
  
    1 1 │   <script setup>
    2   │ - const·emits·=·defineEmits(["update:msg"]);
      2 │ + const·emit·=·defineEmits(["update:msg"]);
    3 3 │   </script>
    4 4 │   
  

Valid

<script setup>
import { useAttrs, useSlots } from "vue";

const props = defineProps({ msg: String });
const emit = defineEmits(["update:msg"]);
const slots = useSlots();
const attrs = useAttrs();
</script>

Options

Each option sets the required variable name for the result of one macro or function.

defineProps

Default: "props"

The required name of the variable that stores the result of defineProps().

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueMacroVariableName": {
          "level": "on",
          "options": {
            "defineProps": "properties"
          }
        }
      }
    }
  }
}

Invalid

<script setup>
const props = defineProps({ msg: String });
</script>

code-block.vue:2:7 lint/nursery/useVueMacroVariableName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The result of defineProps() is stored in props instead of properties.
  
    1 │ <script setup>
  > 2 │ const props = defineProps({ msg: String });
      │       ^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Using the same variable name for this result in every component makes components easier to read and search.
  
  ℹ Rename the variable to properties.
  
  ℹ 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: Rename the variable to properties.
  
    1 1 │   <script setup>
    2   │ - const·props·=·defineProps({·msg:·String·});
      2 │ + const·properties·=·defineProps({·msg:·String·});
    3 3 │   </script>
    4 4 │   
  

Valid

<script setup>
const properties = defineProps({ msg: String });
</script>

defineEmits

Default: "emit"

The required name of the variable that stores the result of defineEmits().

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueMacroVariableName": {
          "level": "on",
          "options": {
            "defineEmits": "emits"
          }
        }
      }
    }
  }
}

Invalid

<script setup>
const emit = defineEmits(["change"]);
</script>

code-block.vue:2:7 lint/nursery/useVueMacroVariableName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The result of defineEmits() is stored in emit instead of emits.
  
    1 │ <script setup>
  > 2 │ const emit = defineEmits(["change"]);
      │       ^^^^
    3 │ </script>
    4 │ 
  
  ℹ Using the same variable name for this result in every component makes components easier to read and search.
  
  ℹ Rename the variable to emits.
  
  ℹ 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: Rename the variable to emits.
  
    1 1 │   <script setup>
    2   │ - const·emit·=·defineEmits(["change"]);
      2 │ + const·emits·=·defineEmits(["change"]);
    3 3 │   </script>
    4 4 │   
  

Valid

<script setup>
const emits = defineEmits(["change"]);
</script>

defineSlots

Default: "slots"

The required name of the variable that stores the result of defineSlots().

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueMacroVariableName": {
          "level": "on",
          "options": {
            "defineSlots": "componentSlots"
          }
        }
      }
    }
  }
}

Invalid

<script setup lang="ts">
const slots = defineSlots<{ default(): any }>();
</script>

code-block.vue:2:7 lint/nursery/useVueMacroVariableName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The result of defineSlots() is stored in slots instead of componentSlots.
  
    1 │ <script setup lang="ts">
  > 2 │ const slots = defineSlots<{ default(): any }>();
      │       ^^^^^
    3 │ </script>
    4 │ 
  
  ℹ Using the same variable name for this result in every component makes components easier to read and search.
  
  ℹ Rename the variable to componentSlots.
  
  ℹ 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: Rename the variable to componentSlots.
  
    1 1 │   <script setup lang="ts">
    2   │ - const·slots·=·defineSlots<{·default():·any·}>();
      2 │ + const·componentSlots·=·defineSlots<{·default():·any·}>();
    3 3 │   </script>
    4 4 │   
  

Valid

<script setup lang="ts">
const componentSlots = defineSlots<{ default(): any }>();
</script>

useSlots

Default: "slots"

The required name of the variable that stores the result of useSlots().

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueMacroVariableName": {
          "level": "on",
          "options": {
            "useSlots": "componentSlots"
          }
        }
      }
    }
  }
}

Invalid

<script setup>
import { useSlots } from "vue";

const slots = useSlots();
</script>

code-block.vue:4:7 lint/nursery/useVueMacroVariableName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The result of useSlots() is stored in slots instead of componentSlots.
  
    2 │ import { useSlots } from "vue";
    3 │ 
  > 4 │ const slots = useSlots();
      │       ^^^^^
    5 │ </script>
    6 │ 
  
  ℹ Using the same variable name for this result in every component makes components easier to read and search.
  
  ℹ Rename the variable to componentSlots.
  
  ℹ 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: Rename the variable to componentSlots.
  
    2 2 │   import { useSlots } from "vue";
    3 3 │   
    4   │ - const·slots·=·useSlots();
      4 │ + const·componentSlots·=·useSlots();
    5 5 │   </script>
    6 6 │   
  

Valid

<script setup>
import { useSlots } from "vue";

const componentSlots = useSlots();
</script>

useAttrs

Default: "attrs"

The required name of the variable that stores the result of useAttrs().

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueMacroVariableName": {
          "level": "on",
          "options": {
            "useAttrs": "attributes"
          }
        }
      }
    }
  }
}

Invalid

<script setup>
import { useAttrs } from "vue";

const attrs = useAttrs();
</script>

code-block.vue:4:7 lint/nursery/useVueMacroVariableName  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The result of useAttrs() is stored in attrs instead of attributes.
  
    2 │ import { useAttrs } from "vue";
    3 │ 
  > 4 │ const attrs = useAttrs();
      │       ^^^^^
    5 │ </script>
    6 │ 
  
  ℹ Using the same variable name for this result in every component makes components easier to read and search.
  
  ℹ Rename the variable to attributes.
  
  ℹ 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: Rename the variable to attributes.
  
    2 2 │   import { useAttrs } from "vue";
    3 3 │   
    4   │ - const·attrs·=·useAttrs();
      4 │ + const·attributes·=·useAttrs();
    5 5 │   </script>
    6 6 │   
  

Valid

<script setup>
import { useAttrs } from "vue";

const attributes = useAttrs();
</script>

Related links

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