sort-imports

Enforce sorted import declarations within modules

The import statement is used to import members (functions, objects or primitives) that have been exported from an external module. Using a specific member syntax:

// single - Import single member.
import myMember from "my-module.js";
import {myOtherMember} from "my-other-module.js";

// multiple - Import multiple members.
import {foo, bar} from "my-module.js";

// all - Import all members, where myModule contains all the exported bindings.
import * as myModule from "my-module.js";
1
2
3
4
5
6
7
8
9

The import statement can also import a module without exported bindings. Used when the module does not export anything, but runs it own code or changes the global context object.

// none - Import module without exported bindings.
import "my-module.js"
1
2

When declaring multiple imports, a sorted list of import declarations make it easier for developers to read the code and find necessary imports later. This rule is purely a matter of style.

Rule Details

This rule checks all import declarations and verifies that all imports are first sorted by the used member syntax and then alphabetically by the first member or alias name.

The --fix option on the command line automatically fixes some problems reported by this rule: multiple members on a single line are automatically sorted (e.g. import { b, a } from 'foo.js' is corrected to import { a, b } from 'foo.js'), but multiple lines are not reordered.

Options

This rule accepts an object with its properties as

• ignoreCase (default: false)
• ignoreDeclarationSort (default: false)
• ignoreMemberSort (default: false)
• memberSyntaxSortOrder (default: ["none", "all", "multiple", "single"]); all 4 items must be present in the array, but you can change the order:
  • none = import module without exported bindings.
  • all = import all members provided by exported bindings.
  • multiple = import multiple members.
  • single = import single member.
• allowSeparatedGroups (default: false)

Default option settings are:

{
    "sort-imports": ["error", {
        "ignoreCase": false,
        "ignoreDeclarationSort": false,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
        "allowSeparatedGroups": false
    }]
}
1
2
3
4
5
6
7
8
9

Examples

Default settings

Examples of correct code for this rule when using default options:

/*eslint sort-imports: "error"*/
import 'module-without-export.js';
import * as bar from 'bar.js';
import * as foo from 'foo.js';
import {alpha, beta} from 'alpha.js';
import {delta, gamma} from 'delta.js';
import a from 'baz.js';
import {b} from 'qux.js';
1
2
3
4
5
6
7
8

/*eslint sort-imports: "error"*/
import a from 'foo.js';
import b from 'bar.js';
import c from 'baz.js';
1
2
3
4

/*eslint sort-imports: "error"*/
import 'foo.js'
import * as bar from 'bar.js';
import {a, b} from 'baz.js';
import c from 'qux.js';
import {d} from 'quux.js';
1
2
3
4
5
6

/*eslint sort-imports: "error"*/
import {a, b, c} from 'foo.js'
1
2

Examples of incorrect code for this rule when using default options:

/*eslint sort-imports: "error"*/
import b from 'foo.js';
import a from 'bar.js';
1
2
3

/*eslint sort-imports: "error"*/
import a from 'foo.js';
import A from 'bar.js';
1
2
3

/*eslint sort-imports: "error"*/
import {c, d} from 'foo.js';
import {a, b} from 'bar.js';
1
2
3

/*eslint sort-imports: "error"*/
import a from 'foo.js';
import {b, c} from 'bar.js';
1
2
3

/*eslint sort-imports: "error"*/
import {a} from 'foo.js';
import {b, c} from 'bar.js';
1
2
3

/*eslint sort-imports: "error"*/
import a from 'foo.js';
import * as b from 'bar.js';
1
2
3

/*eslint sort-imports: "error"*/
import {b, a, c} from 'foo.js'
1
2

ignoreCase

When false (default), uppercase letters of the alphabet must always precede lowercase letters.

When true, the rule ignores the case-sensitivity of the imports local name.

Examples of incorrect code for this rule with the default { "ignoreCase": false } option:

/*eslint sort-imports: ["error", { "ignoreCase": false }]*/
import a from 'bar.js';
import B from 'foo.js';
import c from 'baz.js';
1
2
3
4

Examples of correct code for this rule with the default { "ignoreCase": false } option:

/*eslint sort-imports: ["error", { "ignoreCase": false }]*/
import B from 'bar.js';
import a from 'foo.js';
import c from 'baz.js';
1
2
3
4

Examples of correct code for this rule with { "ignoreCase": true } option:

/*eslint sort-imports: ["error", { "ignoreCase": true }]*/
import a from 'bar.js';
import B from 'foo.js';
import c from 'baz.js';
1
2
3
4

Examples of incorrect code for this rule with the { "ignoreCase": true } option:

/*eslint sort-imports: ["error", { "ignoreCase": true }]*/
import B from 'foo.js';
import a from 'bar.js';
1
2
3

ignoreDeclarationSort

When true, the rule ignores the sorting of import declaration statements. Default is false.

Examples of incorrect code for this rule with the default { "ignoreDeclarationSort": false } option:

/*eslint sort-imports: ["error", { "ignoreDeclarationSort": false }]*/
import b from 'foo.js'
import a from 'bar.js'
1
2
3

Examples of correct code for this rule with the default { "ignoreDeclarationSort": false } option:

/*eslint sort-imports: ["error", { "ignoreDeclarationSort": false }]*/
import a from 'bar.js';
import b from 'foo.js';
1
2
3

Examples of correct code for this rule with the { "ignoreDeclarationSort": true } option:

/*eslint sort-imports: ["error", { "ignoreDeclarationSort": true }]*/
import b from 'foo.js'
import a from 'bar.js'
1
2
3

Examples of incorrect code for this rule with the { "ignoreDeclarationSort": true } option:

/*eslint sort-imports: ["error", { "ignoreDeclarationSort": true }]*/
import {b, a, c} from 'foo.js';
1
2

ignoreMemberSort

When true, the rule ignores the member sorting within a multiple member import declaration. Default is false.

Examples of incorrect code for this rule with the default { "ignoreMemberSort": false } option:

/*eslint sort-imports: ["error", { "ignoreMemberSort": false }]*/
import {b, a, c} from 'foo.js'
1
2

Examples of correct code for this rule with the default { "ignoreMemberSort": false } option:

/*eslint sort-imports: ["error", { "ignoreMemberSort": false }]*/
import {a, b, c} from 'foo.js';
1
2

Examples of correct code for this rule with the { "ignoreMemberSort": true } option:

/*eslint sort-imports: ["error", { "ignoreMemberSort": true }]*/
import {b, a, c} from 'foo.js'
1
2

Examples of incorrect code for this rule with the { "ignoreMemberSort": true } option:

/*eslint sort-imports: ["error", { "ignoreMemberSort": true }]*/
import b from 'foo.js';
import a from 'bar.js';
1
2
3

memberSyntaxSortOrder

This option takes an array with four predefined elements, the order of elements specifies the order of import styles.

Default order is ["none", "all", "multiple", "single"].

There are four different styles and the default member syntax sort order is:

• none - import module without exported bindings.
• all - import all members provided by exported bindings.
• multiple - import multiple members.
• single - import single member.

All four options must be specified in the array, but you can customize their order.

Examples of incorrect code for this rule with the default { "memberSyntaxSortOrder": ["none", "all", "multiple", "single"] } option:

/*eslint sort-imports: "error"*/
import a from 'foo.js';
import * as b from 'bar.js';
1
2
3

Examples of correct code for this rule with the { "memberSyntaxSortOrder": ['single', 'all', 'multiple', 'none'] } option:

/*eslint sort-imports: ["error", { "memberSyntaxSortOrder": ['single', 'all', 'multiple', 'none'] }]*/

import a from 'foo.js';
import * as b from 'bar.js';
1
2
3
4

Examples of correct code for this rule with the { "memberSyntaxSortOrder": ['all', 'single', 'multiple', 'none'] } option:

/*eslint sort-imports: ["error", { "memberSyntaxSortOrder": ['all', 'single', 'multiple', 'none'] }]*/

import * as foo from 'foo.js';
import z from 'zoo.js';
import {a, b} from 'foo.js';
1
2
3
4
5

allowSeparatedGroups

When true, the rule checks the sorting of import declaration statements only for those that appear on consecutive lines. Default is false.

In other words, a blank line or a comment line or line with any other statement after an import declaration statement will reset the sorting of import declaration statements.

Examples of incorrect code for this rule with the { "allowSeparatedGroups": true } option:

/*eslint sort-imports: ["error", { "allowSeparatedGroups": true }]*/

import b from 'foo.js';
import c from 'bar.js';
import a from 'baz.js';
1
2
3
4
5

Examples of correct code for this rule with the { "allowSeparatedGroups": true } option:

/*eslint sort-imports: ["error", { "allowSeparatedGroups": true }]*/

import b from 'foo.js';
import c from 'bar.js';

import a from 'baz.js';
1
2
3
4
5
6

/*eslint sort-imports: ["error", { "allowSeparatedGroups": true }]*/

import b from 'foo.js';
import c from 'bar.js';
// comment
import a from 'baz.js';
1
2
3
4
5
6

/*eslint sort-imports: ["error", { "allowSeparatedGroups": true }]*/

import b from 'foo.js';
import c from 'bar.js';
quux();
import a from 'baz.js';
1
2
3
4
5
6

When Not To Use It

This rule is a formatting preference and not following it won’t negatively affect the quality of your code. If alphabetizing imports isn’t a part of your coding standards, then you can leave this rule disabled.

Related Rules

• sort-keys
• sort-vars

Version

This rule was introduced in ESLint v2.0.0-beta.1.

Resources

• Rule source
• Tests source