noDuplicateAttributes

HTML

Summary

Rule available since: v2.3.12
Diagnostic Category: lint/correctness/noDuplicateAttributes
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as @html-eslint/no-duplicate-attrs
- Same as vue/no-duplicate-attributes

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
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/correctness/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.

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

Valid

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