76 lines
2.2 KiB
Markdown
76 lines
2.2 KiB
Markdown
|
# import/first
|
||
|
|
|
||
|
|
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
|
||
|
|
|
||
|
|
<!-- end auto-generated rule header -->
|
||
|
|
|
||
|
|
This rule reports any imports that come after non-import
|
||
|
|
statements.
|
||
|
|
|
||
|
|
## Rule Details
|
||
|
|
|
||
|
|
```js
|
||
|
|
import foo from './foo'
|
||
|
|
|
||
|
|
// some module-level initializer
|
||
|
|
initWith(foo)
|
||
|
|
|
||
|
|
import bar from './bar' // <- reported
|
||
|
|
```
|
||
|
|
|
||
|
|
Providing `absolute-first` as an option will report any absolute imports (i.e.
|
||
|
|
packages) that come after any relative imports:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import foo from 'foo'
|
||
|
|
import bar from './bar'
|
||
|
|
|
||
|
|
import * as _ from 'lodash' // <- reported
|
||
|
|
```
|
||
|
|
|
||
|
|
If you really want import type ordering, check out [`import/order`].
|
||
|
|
|
||
|
|
Notably, `import`s are hoisted, which means the imported modules will be evaluated
|
||
|
|
before any of the statements interspersed between them. Keeping all `import`s together
|
||
|
|
at the top of the file may prevent surprises resulting from this part of the spec.
|
||
|
|
|
||
|
|
### On directives
|
||
|
|
|
||
|
|
Directives are allowed as long as they occur strictly before any `import` declarations,
|
||
|
|
as follows:
|
||
|
|
|
||
|
|
```js
|
||
|
|
'use super-mega-strict'
|
||
|
|
|
||
|
|
import { suchFoo } from 'lame-fake-module-name' // no report here
|
||
|
|
```
|
||
|
|
|
||
|
|
A directive in this case is assumed to be a single statement that contains only
|
||
|
|
a literal string-valued expression.
|
||
|
|
|
||
|
|
`'use strict'` would be a good example, except that [modules are always in strict
|
||
|
|
mode](https://262.ecma-international.org/6.0/#sec-strict-mode-code) so it would be surprising to see a `'use strict'` sharing a file with `import`s and
|
||
|
|
`export`s.
|
||
|
|
|
||
|
|
Given that, see [#255] for the reasoning.
|
||
|
|
|
||
|
|
### With Fixer
|
||
|
|
|
||
|
|
This rule contains a fixer to reorder in-body import to top, the following criteria applied:
|
||
|
|
|
||
|
|
1. Never re-order relative to each other, even if `absolute-first` is set.
|
||
|
|
2. If an import creates an identifier, and that identifier is referenced at module level *before* the import itself, that won't be re-ordered.
|
||
|
|
|
||
|
|
## When Not To Use It
|
||
|
|
|
||
|
|
If you don't mind imports being sprinkled throughout, you may not want to
|
||
|
|
enable this rule.
|
||
|
|
|
||
|
|
## Further Reading
|
||
|
|
|
||
|
|
- [`import/order`]: a major step up from `absolute-first`
|
||
|
|
- Issue [#255]
|
||
|
|
|
||
|
|
[`import/order`]: ./order.md
|
||
|
|
[#255]: https://github.com/import-js/eslint-plugin-import/issues/255
|