ContextQMD
Back to Biomejs

noNamespaceImport

src/content/docs/linter/rules/no-namespace-import.mdx

latest3.7 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/performance/noNamespaceImport`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - Sources: - Same as [`barrel-files/avoid-namespace-import`](https://github.com/thepassle/eslint-plugin-barrel-files/blob/main/docs/rules/avoid-namespace-import.md)

How to configure

json
{
	"linter": {
		"rules": {
			"performance": {
				"noNamespaceImport": "error"
			}
		}
	}
}

Description

Disallow the use of namespace imports.

Namespace imports might impact the efficiency of tree shaking, a process that removes unused code from bundles. The effectiveness of tree shaking largely depends on the bundler (e.g., Webpack, Rollup) and its configuration. Modern bundlers are generally capable of handling namespace imports effectively, but using named imports is recommended for optimal tree shaking and minimizing bundle size.

Examples

Invalid

js
import * as foo from "foo";
<pre class="language-text"><code class="language-text">code-block.js:1:8 <a href="https://biomejs.dev/linter/rules/no-namespace-import">lint/performance/noNamespaceImport</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Avoid namespace imports, it can prevent efficient tree shaking and increase bundle size.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>import &#42; as foo from &quot;foo&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><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;">Use named imports instead.</span> </code></pre>

Valid

ts
import { foo } from "foo"
import type { bar } from "bar"
import type * as baz from "baz"
</TabItem> </Tabs>