Back to Biomejs

noConsole

src/content/docs/linter/rules/no-console.mdx

latest10.4 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.6.0` - Diagnostic Category: [`lint/suspicious/noConsole`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - Sources: - Same as [`no-console`](https://eslint.org/docs/latest/rules/no-console)

How to configure

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

Description

Disallow the use of console.

In a browser environment, it’s considered a best practice to log messages using console. Such messages are considered to be for debugging purposes and therefore not suitable to ship to the client. In general, calls using console should be stripped before being pushed to production.

Examples

Invalid

js
console.error('hello world')
<pre class="language-text"><code class="language-text">code-block.js:1:1 <a href="https://biomejs.dev/linter/rules/no-console">lint/suspicious/noConsole</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Don't use </span><span style="color: Orange;"><strong>console</strong></span><span style="color: Orange;">.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>console.error('hello world') <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>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The use of </span><span style="color: lightgreen;"><strong>console</strong></span><span style="color: lightgreen;"> is often reserved for debugging.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unsafe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Remove </span><span style="color: lightgreen;"><strong>console</strong></span><span style="color: lightgreen;">.</span> <strong> 1 │ </strong><span style="color: Tomato;">c</span><span style="color: Tomato;">o</span><span style="color: Tomato;">n</span><span style="color: Tomato;">s</span><span style="color: Tomato;">o</span><span style="color: Tomato;">l</span><span style="color: Tomato;">e</span><span style="color: Tomato;">.</span><span style="color: Tomato;">e</span><span style="color: Tomato;">r</span><span style="color: Tomato;">r</span><span style="color: Tomato;">o</span><span style="color: Tomato;">r</span><span style="color: Tomato;">(</span><span style="color: Tomato;">'</span><span style="color: Tomato;">h</span><span style="color: Tomato;">e</span><span style="color: Tomato;">l</span><span style="color: Tomato;">l</span><span style="color: Tomato;">o</span><span style="opacity: 0.8;"><span style="color: Tomato;">·</span></span><span style="color: Tomato;">w</span><span style="color: Tomato;">o</span><span style="color: Tomato;">r</span><span style="color: Tomato;">l</span><span style="color: Tomato;">d</span><span style="color: Tomato;">'</span><span style="color: Tomato;">)</span> <strong> │ </strong><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span> </code></pre>

Options

Use the options to explicitly allow a specific subset of console methods.

json
{
	"linter": {
		"rules": {
			"suspicious": {
				"noConsole": {
					"options": {
						"allow": [
							"assert",
							"error",
							"info",
							"warn"
						]
					}
				}
			}
		}
	}
}

js
console.error("error message"); // Allowed
console.warn("warning message"); // Allowed
console.info("info message"); // Allowed
console.log("log message");
console.assert(true, "explanation"); // Allowed
<pre class="language-text"><code class="language-text">code-block.js:4:1 <a href="https://biomejs.dev/linter/rules/no-console">lint/suspicious/noConsole</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Don't use </span><span style="color: Orange;"><strong>console</strong></span><span style="color: Orange;">.</span> <strong>2 │ </strong>console.warn(&quot;warning message&quot;); // Allowed <strong>3 │ </strong>console.info(&quot;info message&quot;); // Allowed <strong><span style="color: Tomato;">&gt;</span></strong> <strong>4 │ </strong>console.log(&quot;log message&quot;); <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>5 │ </strong>console.assert(true, &quot;explanation&quot;); // Allowed <strong>6 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The use of </span><span style="color: lightgreen;"><strong>console</strong></span><span style="color: lightgreen;"> is often reserved for debugging.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unsafe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Remove </span><span style="color: lightgreen;"><strong>console</strong></span><span style="color: lightgreen;">.</span> <strong>2</strong> <strong>2</strong><strong> │ </strong> console.warn(&quot;warning message&quot;); // Allowed <strong>3</strong> <strong>3</strong><strong> │ </strong> console.info(&quot;info message&quot;); // Allowed <strong>4</strong> <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;"><strong>c</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><strong>n</strong></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><strong>l</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>.</strong></span><span style="color: Tomato;"><strong>l</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><strong>g</strong></span><span style="color: Tomato;"><strong>(</strong></span><span style="color: Tomato;"><strong>&quot;</strong></span><span style="color: Tomato;"><strong>l</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><strong>g</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;"><strong>·</strong></span></span><span style="color: Tomato;"><strong>m</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;"><strong>a</strong></span><span style="color: Tomato;"><strong>g</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>&quot;</strong></span><span style="color: Tomato;"><strong>)</strong></span><span style="color: Tomato;"><strong>;</strong></span> <strong>5</strong> <strong>4</strong><strong> │ </strong> console.assert(true, &quot;explanation&quot;); // Allowed <strong>6</strong> <strong>5</strong><strong> │ </strong> </code></pre> </TabItem> </Tabs>