useVueConsistentVForDelimiter (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueConsistentVForDelimiter
This rule has a safe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/v-for-delimiter-style

How to configure

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

Description

Enforce a consistent delimiter between the item and the list in v-for directives.

In a v-for directive, Vue accepts both in and of between the item and the list, and treats them the same way: item in items and item of items render the same list. Using the same word everywhere makes templates easier to read and search.

Examples

Invalid

1
<template>
2
  <div v-for="item of items"></div>
3
</template>

code-block.vue:2:20 lint/nursery/useVueConsistentVForDelimiter  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This v-for uses of instead of in.
  
    1 │ <template>
  > 2 │   <div v-for="item of items"></div>
      │                    ^^
    3 │ </template>
    4 │ 
  
  ℹ Vue treats in and of the same way in v-for, so mixing them makes templates harder to read and search.
  
  ℹ 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.
  
  ℹ Safe fix: Use in instead.
  
    1 1 │   <template>
    2   │ - ··<div·v-for="item·of·items"></div>
      2 │ + ··<div·v-for="item·in·items"></div>
    3 3 │   </template>
    4 4 │

Valid

1
<template>
2
  <div v-for="item in items"></div>
3
  <div v-for="(item, index) in items"></div>
4
</template>

Options

`delimiter`

The word to use between the item and the list: "in" or "of".

Default: "in"

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueConsistentVForDelimiter": {
6
          "level": "on",
7
          "options": {
8
            "delimiter": "of"
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
<template>
2
  <div v-for="item in items"></div>
3
</template>

code-block.vue:2:20 lint/nursery/useVueConsistentVForDelimiter  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This v-for uses in instead of of.
  
    1 │ <template>
  > 2 │   <div v-for="item in items"></div>
      │                    ^^
    3 │ </template>
    4 │ 
  
  ℹ Vue treats in and of the same way in v-for, so mixing them makes templates harder to read and search.
  
  ℹ 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.
  
  ℹ Safe fix: Use of instead.
  
    1 1 │   <template>
    2   │ - ··<div·v-for="item·in·items"></div>
      2 │ + ··<div·v-for="item·of·items"></div>
    3 3 │   </template>
    4 4 │

Valid

1
<template>
2
  <div v-for="item of items"></div>
3
</template>

useVueConsistentVForDelimiter (HTML)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

delimiter

Invalid

Valid

Related links

`delimiter`