Back to Biomejs

useGlobalThis

src/content/docs/linter/rules/use-global-this.mdx

latest6.2 KB
Original Source

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

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::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.14` - Diagnostic Category: [`lint/nursery/useGlobalThis`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - Sources: - Same as [`unicorn/prefer-global-this`](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-global-this.md)

How to configure

json
{
	"linter": {
		"rules": {
			"nursery": {
				"useGlobalThis": "error"
			}
		}
	}
}

Description

Enforce the use of globalThis over window, self, and global.

globalThis is a standard way to access the global object across platforms such as browsers, Web Workers, Node.js and so on, and using it can make your code portable.

However, there are several exceptions that are allowed:

  1. Certain window/Web Workers-specific APIs, such as window.innerHeight and self.postMessage
  2. Window-specific events, such as window.addEventListener('resize')

Examples

Invalid

js
window.foo;
<pre class="language-text"><code class="language-text">code-block.js:1:1 <a href="https://biomejs.dev/linter/rules/use-global-this">lint/nursery/useGlobalThis</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Prefer </span><span style="color: Orange;"><strong>globalThis</strong></span><span style="color: Orange;"> over </span><span style="color: Orange;"><strong>window</strong></span><span style="color: Orange;">, </span><span style="color: Orange;"><strong>self</strong></span><span style="color: Orange;"> and </span><span style="color: Orange;"><strong>global</strong></span><span style="color: Orange;">.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>window.foo; <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>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;"><strong>globalThis</strong></span><span style="color: lightgreen;"> is the standard way to access the global object across environments, which improves code portability.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>
js
window.addEventListener('click', () => {});
<pre class="language-text"><code class="language-text">code-block.js:1:1 <a href="https://biomejs.dev/linter/rules/use-global-this">lint/nursery/useGlobalThis</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Prefer </span><span style="color: Orange;"><strong>globalThis</strong></span><span style="color: Orange;"> over </span><span style="color: Orange;"><strong>window</strong></span><span style="color: Orange;">, </span><span style="color: Orange;"><strong>self</strong></span><span style="color: Orange;"> and </span><span style="color: Orange;"><strong>global</strong></span><span style="color: Orange;">.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>window.addEventListener('click', () =&gt; &#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>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;"><strong>globalThis</strong></span><span style="color: lightgreen;"> is the standard way to access the global object across environments, which improves code portability.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>

Valid

js
globalThis.foo;
js
globalThis.addEventListener('click', () => {});
js
// window/Web Workers-specific APIs are allowed
window.innerWidth;
self.postMessage({ type: 'ready' });
js
// window-specific events are allowed
window.addEventListener('resize', () => {});
</TabItem> </Tabs>