noDuplicateAttributes

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="HTML" icon="seti:html"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.12` - Diagnostic Category: [`lint/nursery/noDuplicateAttributes`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`@html-eslint/no-duplicate-attrs`](https://html-eslint.org/docs/rules/no-duplicate-attrs) - Same as [`vue/no-duplicate-attributes`](https://eslint.vuejs.org/rules/no-duplicate-attributes)

How to configure

json

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

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

html

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

<pre class="language-text"><code class="language-text">code-block.html:1:14 <a href="https://biomejs.dev/linter/rules/no-duplicate-attributes">lint/nursery/noDuplicateAttributes</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ℹ 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 <a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a> for more information. </code></pre>

vue

<template>
  <div foo :foo="bar" />
</template>

Valid