ContextQMD
Back to Biomejs

noCommaOperator

src/content/docs/linter/rules/no-comma-operator.mdx

latest4.5 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/complexity/noCommaOperator`](/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 [**warning**](/reference/diagnostics#warning). - Sources: - Same as [`no-sequences`](https://eslint.org/docs/latest/rules/no-sequences)

How to configure

json
{
	"linter": {
		"rules": {
			"complexity": {
				"noCommaOperator": "error"
			}
		}
	}
}

Description

Disallow comma operator.

The comma operator includes multiple expressions where only one is expected. It evaluates every operand from left to right and returns the value of the last operand. It frequently obscures side effects, and its use is often an accident.

The use of the comma operator in the initialization and update parts of a for is still allowed.

Examples

Invalid

js
const foo = (doSomething(), 0);
<pre class="language-text"><code class="language-text">code-block.js:1:27 <a href="https://biomejs.dev/linter/rules/no-comma-operator">lint/complexity/noCommaOperator</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The comma operator is disallowed.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>const foo = (doSomething(), 0); <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Its use is often confusing and obscures side effects.</span> </code></pre>
js
for (; doSomething(), !!test; ) {}
<pre class="language-text"><code class="language-text">code-block.js:1:21 <a href="https://biomejs.dev/linter/rules/no-comma-operator">lint/complexity/noCommaOperator</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The comma operator is disallowed.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>for (; doSomething(), !!test; ) &#123;&#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Its use is often confusing and obscures side effects.</span> </code></pre>
js
// Use a semicolon instead.
let a, b;
a = 1, b = 2;
<pre class="language-text"><code class="language-text">code-block.js:3:6 <a href="https://biomejs.dev/linter/rules/no-comma-operator">lint/complexity/noCommaOperator</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The comma operator is disallowed.</span> <strong>1 │ </strong>// Use a semicolon instead. <strong>2 │ </strong>let a, b; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong>a = 1, b = 2; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Its use is often confusing and obscures side effects.</span> </code></pre>

Valid

js
for(a = 0, b = 0; (a + b) < 10; a++, b += 2) {}
</TabItem> </Tabs>