useVueHyphenatedAttributes

Цей контент ще не доступний вашою мовою.

HTML

Summary

Rule available since: v2.3.6
Diagnostic Category: lint/nursery/useVueHyphenatedAttributes
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/attribute-hyphenation

How to configure

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

Description

Enforce hyphenated (kebab-case) attribute names in Vue templates.

Vue style guide recommends using hyphenated attribute (and prop) names in templates to keep them consistent and distinguish them from JavaScript identifiers written in camelCase/PascalCase.

This rule flags attributes that are detected as camelCase, PascalCase, CONSTANT_CASE, snake_case or that contain any uppercase ASCII letter. It uses Biome’s internal Case::identify helper.

Allowed:

kebab-case attributes (e.g. data-test-id)
pure lowercase single word attributes (e.g. class, id)

Examples

Invalid

1
<div fooBar="x"></div>

1
<MyComp :someProp="x" />

Valid

1
<div data-test-id="x"></div>
2
<div class="foo"></div>
3
<MyComp :some-prop="x" />

Options

The rule supports the following options:

`ignore`

A list of attribute names that should be ignored by the rule (they won’t be required to be hyphenated). Use this when you have a fixed set of camelCase / PascalCase prop names you intentionally allow.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueHyphenatedAttributes": {
6
          "options": {
7
            "ignore": [
8
              "someProp",
9
              "fooBar"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Valid (using `ignore`)

1
<div fooBar="x"></div>

`ignoreTags`

A list of tag names whose attributes should be skipped entirely. This is useful for third-party or internal components that deliberately expose non‑hyphenated prop names.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueHyphenatedAttributes": {
6
          "options": {
7
            "ignoreTags": [
8
              "MyComp",
9
              "AnotherWidget"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

Valid (using `ignoreTags`)

1
<MyComp :someProp="x" />