sort-imports

在模块中强制执行排序的导入声明

🔧 Fixable

此规则报告的一些问题可通过 --fix 命令行选项自动修复

import 语句用于导入已从外部模块导出的成员(函数、对象或基础类型)。使用特定的成员语法:

¥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";

import 语句也可以在没有导出绑定的情况下导入模块。当模块不导出任何内容,但运行它自己的代码或更改全局上下文对象时使用。

¥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"

在声明多个导入时,导入声明的排序列表使开发者更容易阅读代码并在以后找到必要的导入。这条规则纯粹是风格问题。

¥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.

命令行上的 --fix 选项会自动修复此规则报告的一些问题:一行中的多个成员会自动排序(例如,import { b, a } from 'foo.js' 被更正为 import { a, b } from 'foo.js'),但多行不会重新排序。

¥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(默认:false

    ¥ignoreCase (default: false)

  • ignoreDeclarationSort(默认:false

    ¥ignoreDeclarationSort (default: false)

  • ignoreMemberSort(默认:false

    ¥ignoreMemberSort (default: false)

  • memberSyntaxSortOrder(默认:["none", "all", "multiple", "single"]);所有 4 项都必须存在于数组中,但你可以更改顺序:

    ¥memberSyntaxSortOrder (default: ["none", "all", "multiple", "single"]); all 4 items must be present in the array, but you can change the order:

    • none = 没有导出绑定的导入模块。

      ¥none = import module without exported bindings.

    • all = 导入导出绑定提供的所有成员。

      ¥all = import all members provided by exported bindings.

    • multiple = 导入多个成员。

      ¥multiple = import multiple members.

    • single = 导入单个成员。

      ¥single = import single member.

  • allowSeparatedGroups(默认:false

    ¥allowSeparatedGroups (default: false)

默认选项设置为:

¥Default option settings are:

{
    "sort-imports": ["error", {
        "ignoreCase": false,
        "ignoreDeclarationSort": false,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
        "allowSeparatedGroups": false
    }]
}

示例

¥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';
在线运行
/*eslint sort-imports: "error"*/
import a from 'foo.js';
import b from 'bar.js';
import c from 'baz.js';
在线运行
/*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';
在线运行
/*eslint sort-imports: "error"*/
import {a, b, c} from 'foo.js'

使用默认选项时此规则的错误代码示例:

¥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';
在线运行
/*eslint sort-imports: "error"*/
import a from 'foo.js';
import A from 'bar.js';
在线运行
/*eslint sort-imports: "error"*/
import {c, d} from 'foo.js';
import {a, b} from 'bar.js';
在线运行
/*eslint sort-imports: "error"*/
import a from 'foo.js';
import {b, c} from 'bar.js';
在线运行
/*eslint sort-imports: "error"*/
import {a} from 'foo.js';
import {b, c} from 'bar.js';
在线运行
/*eslint sort-imports: "error"*/
import a from 'foo.js';
import * as b from 'bar.js';
在线运行
/*eslint sort-imports: "error"*/
import {b, a, c} from 'foo.js'

ignoreCase

false(默认)时,字母表中的大写字母必须始终位于小写字母之前。

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

true 时,规则忽略导入局部名称的区分大小写。

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

使用默认 { "ignoreCase": false } 选项的此规则的错误代码示例:

¥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';

使用默认 { "ignoreCase": false } 选项的此规则的正确代码示例:

¥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';

使用 { "ignoreCase": true } 选项的此规则的正确代码示例:

¥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';

使用 { "ignoreCase": true } 选项的此规则的错误代码示例:

¥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';

ignoreDeclarationSort

true 时,规则忽略导入声明语句的排序。默认为 false

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

使用默认 { "ignoreDeclarationSort": 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'

使用默认 { "ignoreDeclarationSort": false } 选项的此规则的正确代码示例:

¥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';

使用 { "ignoreDeclarationSort": true } 选项的此规则的正确代码示例:

¥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'

使用 { "ignoreDeclarationSort": true } 选项的此规则的错误代码示例:

¥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';

ignoreMemberSort

true 时,规则忽略 multiple 成员导入声明中的成员排序。默认为 false

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

使用默认 { "ignoreMemberSort": 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'

使用默认 { "ignoreMemberSort": false } 选项的此规则的正确代码示例:

¥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';

使用 { "ignoreMemberSort": true } 选项的此规则的正确代码示例:

¥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'

使用 { "ignoreMemberSort": true } 选项的此规则的错误代码示例:

¥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';

memberSyntaxSortOrder

此选项采用具有四个预定义元素的数组,元素的顺序指定导入样式的顺序。

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

默认顺序是 ["none", "all", "multiple", "single"]

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

有四种不同的样式,默认的成员语法排序顺序为:

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

  • none - 没有导出绑定的导入模块。

    ¥none - import module without exported bindings.

  • all - 导入导出绑定提供的所有成员。

    ¥all - import all members provided by exported bindings.

  • multiple - 导入多个成员。

    ¥multiple - import multiple members.

  • single - 导入单个成员。

    ¥single - import single member.

必须在数组中指定所有四个选项,但你可以自定义它们的顺序。

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

使用默认 { "memberSyntaxSortOrder": ["none", "all", "multiple", "single"] } 选项的此规则的错误代码示例:

¥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';

使用 { "memberSyntaxSortOrder": ['single', 'all', 'multiple', 'none'] } 选项的此规则的正确代码示例:

¥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';

使用 { "memberSyntaxSortOrder": ['all', 'single', 'multiple', 'none'] } 选项的此规则的正确代码示例:

¥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';

allowSeparatedGroups

true 时,规则仅检查出现在连续行上的导入声明语句的排序。默认为 false

¥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.

使用 { "allowSeparatedGroups": true } 选项的此规则的错误代码示例:

¥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';

使用 { "allowSeparatedGroups": true } 选项的此规则的正确代码示例:

¥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';
在线运行
/*eslint sort-imports: ["error", { "allowSeparatedGroups": true }]*/

import b from 'foo.js';
import c from 'bar.js';
// comment
import a from 'baz.js';
在线运行
/*eslint sort-imports: ["error", { "allowSeparatedGroups": true }]*/

import b from 'foo.js';
import c from 'bar.js';
quux();
import a from 'baz.js';

何时不使用

¥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.

版本

此规则是在 ESLint v2.0.0-beta.1 中引入。

资源