Back to Biomejs

noDuplicateClassMembers

src/content/docs/linter/rules/no-duplicate-class-members.mdx

latest7.6 KB
Original Source

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

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/suspicious/noDuplicateClassMembers`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). - Sources: - Same as [`no-dupe-class-members`](https://eslint.org/docs/latest/rules/no-dupe-class-members) - Same as [`@typescript-eslint/no-dupe-class-members`](https://typescript-eslint.io/rules/no-dupe-class-members)

How to configure

json
{
	"linter": {
		"rules": {
			"suspicious": {
				"noDuplicateClassMembers": "error"
			}
		}
	}
}

Description

Disallow duplicate class members.

If there are declarations of the same name among class members, the last declaration overwrites other declarations silently. It can cause unexpected behaviours.

Examples

Invalid

js
class Foo {
  bar() { }
  bar() { }
}
<pre class="language-text"><code class="language-text">code-block.js:3:3 <a href="https://biomejs.dev/linter/rules/no-duplicate-class-members">lint/suspicious/noDuplicateClassMembers</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Duplicate class member name &quot;bar&quot;</span> <strong>1 │ </strong>class Foo &#123; <strong>2 │ </strong> bar() &#123; &#125; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> bar() &#123; &#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong>&#125; <strong>5 │ </strong> </code></pre>
js
class Foo {
  bar() { }
  get bar() { }
}
<pre class="language-text"><code class="language-text">code-block.js:3:3 <a href="https://biomejs.dev/linter/rules/no-duplicate-class-members">lint/suspicious/noDuplicateClassMembers</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Duplicate class member name &quot;bar&quot;</span> <strong>1 │ </strong>class Foo &#123; <strong>2 │ </strong> bar() &#123; &#125; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> get bar() &#123; &#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong>&#125; <strong>5 │ </strong> </code></pre>
js
class Foo {
  bar;
  bar() { }
}
<pre class="language-text"><code class="language-text">code-block.js:3:3 <a href="https://biomejs.dev/linter/rules/no-duplicate-class-members">lint/suspicious/noDuplicateClassMembers</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Duplicate class member name &quot;bar&quot;</span> <strong>1 │ </strong>class Foo &#123; <strong>2 │ </strong> bar; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> bar() &#123; &#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong>&#125; <strong>5 │ </strong> </code></pre>
js
class Foo {
  static bar() { }
  static bar() { }
}
<pre class="language-text"><code class="language-text">code-block.js:3:3 <a href="https://biomejs.dev/linter/rules/no-duplicate-class-members">lint/suspicious/noDuplicateClassMembers</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Duplicate class member name &quot;bar&quot;</span> <strong>1 │ </strong>class Foo &#123; <strong>2 │ </strong> static bar() &#123; &#125; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> static bar() &#123; &#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong>&#125; <strong>5 │ </strong> </code></pre>

Valid

js
class Foo {
  bar() { }
  qux() { }
}
js
class Foo {
  set bar(value) { }
  get bar() { }
}
js
class Foo {
  bar;
  qux;
}
js
class Foo {
  bar;
  qux() { }
}
js
class Foo {
  static bar() { }
  bar() { }
}
</TabItem> </Tabs>