src/content/docs/linter/rules/use-imports-first.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::note This rule has been implemented but not released yet. It will be available in the next release. ::: :::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 - Diagnostic Category: [`lint/nursery/useImportsFirst`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`import/first`](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/first.md){
"linter": {
"rules": {
"nursery": {
"useImportsFirst": "error"
}
}
}
}
Enforce that all imports appear at the top of the module.
Import statements that appear after non-import statements are harder to find and may indicate disorganized code. Keeping all imports together at the top makes dependencies immediately visible.
Directives such as "use strict" are always allowed before
imports, since they are parsed separately from module items.
This rule only applies to ES module import statements. CommonJS
require() calls are not covered.
import { foo } from "foo";
const bar = 1;
import { baz } from "baz";
import { foo } from "foo";
import { bar } from "bar";
const baz = 1;
"use strict";
import { foo } from "foo";