noDuplicateAttributes

Este conteúdo não está disponível em sua língua ainda.

HTML

Summary

Diagnostic Category: lint/nursery/noDuplicateAttributes
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as @html-eslint/no-duplicate-attrs
- Same as vue/no-duplicate-attributes

How to configure

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

Description

Disallow duplication of attributes.

According to the HTML specification, each attribute name must be unique within a single element. Duplicate attributes are invalid and can lead to unexpected behavior in browsers.

Vue templates

For Vue templates (.vue files), this rule also considers the following directives as aliases of their arguments:

v-bind:foo and :foo are handled as the attribute foo.

Vue class/style bindings are ignored. For example, class and :class may co-exist.

Event handlers are ignored. For example, @click and v-on:click are not considered attributes by this rule.

Dynamic arguments such as :[foo] or v-bind:[foo] are ignored.

Examples

Invalid

1
<div foo="a" foo="b"></div>

code-block.html:1:14 lint/nursery/noDuplicateAttributes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Duplicate attribute ‘foo’.
  
  > 1 │ <div foo=“a” foo=“b”></div>
      │              ^^^^^^^
    2 │ 
  
  ℹ This is the first occurrence of the attribute.
  
  > 1 │ <div foo=“a” foo=“b”></div>
      │      ^^^
    2 │ 
  
  ℹ Each attribute name must be unique within a single element. Duplicate attributes are invalid and can lead to unexpected browser behavior.
  
  ℹ Consider removing or renaming the duplicate ‘foo’ attribute.
  
  ℹ 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.

1
<template>
2
  <div foo :foo="bar" />
3
</template>

Valid

1
<div foo="a" bar="b"></div>