Back to Biomejs

noInvalidUseBeforeDeclaration

src/content/docs/linter/rules/no-invalid-use-before-declaration.mdx

latest7.3 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.5.0` - Diagnostic Category: [`lint/correctness/noInvalidUseBeforeDeclaration`](/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-use-before-define`](https://eslint.org/docs/latest/rules/no-use-before-define) - Same as [`@typescript-eslint/no-use-before-define`](https://typescript-eslint.io/rules/no-use-before-define)

How to configure

json
{
	"linter": {
		"rules": {
			"correctness": {
				"noInvalidUseBeforeDeclaration": "error"
			}
		}
	}
}

Description

Disallow the use of variables, function parameters, classes, and enums before their declaration

JavaScript doesn't allow the use of block-scoped variables (let, const), function parameters, and classes before their declaration. Similarly TypeScript doesn't allow the use of enums before their declaration. A ReferenceError will be thrown with any attempt to access the variable or the parameter before its declaration.

The rule also reports the use of variables declared with var before their declarations.

Examples

Invalid

js
function f() {
    console.log(x);
    let x;
}
<pre class="language-text"><code class="language-text">code-block.js:2:17 <a href="https://biomejs.dev/linter/rules/no-invalid-use-before-declaration">lint/correctness/noInvalidUseBeforeDeclaration</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">This variable is used before its declaration.</span> <strong>1 │ </strong>function f() &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> console.log(x); <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong> let x; <strong>4 │ </strong>&#125; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The variable is declared here:</span> <strong>1 │ </strong>function f() &#123; <strong>2 │ </strong> console.log(x); <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> let x; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong>&#125; <strong>5 │ </strong> </code></pre>
js
function f() {
    console.log(x);
    var x = 0;
}
<pre class="language-text"><code class="language-text">code-block.js:2:17 <a href="https://biomejs.dev/linter/rules/no-invalid-use-before-declaration">lint/correctness/noInvalidUseBeforeDeclaration</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">This variable is used before its declaration.</span> <strong>1 │ </strong>function f() &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> console.log(x); <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong> var x = 0; <strong>4 │ </strong>&#125; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The variable is declared here:</span> <strong>1 │ </strong>function f() &#123; <strong>2 │ </strong> console.log(x); <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> var x = 0; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong>&#125; <strong>5 │ </strong> </code></pre>
js
function f(a = b, b = 0) {}
<pre class="language-text"><code class="language-text">code-block.js:1:16 <a href="https://biomejs.dev/linter/rules/no-invalid-use-before-declaration">lint/correctness/noInvalidUseBeforeDeclaration</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">This parameter is used before its declaration.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>function f(a = b, b = 0) &#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;">The parameter is declared here:</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>function f(a = b, b = 0) &#123;&#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> </code></pre>
js
new C();
class C {}
<pre class="language-text"><code class="language-text">code-block.js:1:5 <a href="https://biomejs.dev/linter/rules/no-invalid-use-before-declaration">lint/correctness/noInvalidUseBeforeDeclaration</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">This class is used before its declaration.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>new C(); <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong>class C &#123;&#125; <strong>3 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The class is declared here:</span> <strong>1 │ </strong>new C(); <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>class C &#123;&#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong> </code></pre>

Valid

js
f();
function f() {}
js
// An export can reference a variable before its declaration.
export { CONSTANT };
const CONSTANT = 0;
js
function f() { return CONSTANT; }
const CONSTANT = 0;
ts
function f() {
    new C();
}
let c: C;
class C {}
</TabItem> </Tabs>