sort-imports

強制模組內 import 宣告排序

import 陳述式用於導入從外部模組匯出的成員（函式、物件或基本型別）。使用特定的成員語法

// 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

import 陳述式也可以導入沒有匯出綁定的模組。當模組不匯出任何東西，但執行自己的程式碼或更改全域內容物件時使用。

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

當宣告多個 import 時，排序過的 import 宣告列表可以讓開發人員更容易閱讀程式碼並在稍後找到必要的 import。此規則純粹是風格問題。

規則詳情

此規則檢查所有 import 宣告，並驗證所有 import 是否首先按使用的成員語法排序，然後按第一個成員或別名名稱依字母順序排序。

命令列上的 --fix 選項會自動修正此規則報告的一些問題：單行上的多個成員會自動排序（例如，import { b, a } from 'foo.js' 會更正為 import { a, b } from 'foo.js'），但不會重新排序多行。

選項

此規則接受一個物件，其屬性如下：

• ignoreCase (預設值：false)
• ignoreDeclarationSort (預設值：false)
• ignoreMemberSort (預設值：false)
• memberSyntaxSortOrder (預設值：["none", "all", "multiple", "single"])；陣列中必須存在所有 4 個項目，但您可以更改順序
  • none = 導入沒有匯出綁定的模組。
  • all = 導入匯出綁定提供的所有成員。
  • multiple = 導入多個成員。
  • single = 導入單個成員。
• allowSeparatedGroups (預設值：false)

預設選項設定為

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

範例

預設設定

使用預設選項時，此規則的正確程式碼範例

/*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

使用預設選項時，此規則的不正確程式碼範例

/*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

當為 false (預設值) 時，字母的大寫字母必須始終位於小寫字母之前。

當為 true 時，規則會忽略 import 本機名稱的大小寫敏感度。

使用預設的 { "ignoreCase": false } 選項時，此規則的不正確程式碼範例

/*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

使用預設的 { "ignoreCase": false } 選項時，此規則的正確程式碼範例

/*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

使用 { "ignoreCase": true } 選項時，此規則的正確程式碼範例

/*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

使用 { "ignoreCase": true } 選項時，此規則的不正確程式碼範例

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

ignoreDeclarationSort

當為 true 時，規則會忽略 import 宣告陳述式的排序。預設值為 false。

使用預設的 { "ignoreDeclarationSort": false } 選項時，此規則的不正確程式碼範例

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

使用預設的 { "ignoreDeclarationSort": false } 選項時，此規則的正確程式碼範例

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

使用 { "ignoreDeclarationSort": true } 選項時，此規則的正確程式碼範例

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

使用 { "ignoreDeclarationSort": true } 選項時，此規則的不正確程式碼範例

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

ignoreMemberSort

當為 true 時，規則會忽略 multiple 成員 import 宣告中的成員排序。預設值為 false。

使用預設的 { "ignoreMemberSort": false } 選項時，此規則的不正確程式碼範例

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

使用預設的 { "ignoreMemberSort": false } 選項時，此規則的正確程式碼範例

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

使用 { "ignoreMemberSort": true } 選項時，此規則的正確程式碼範例

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

使用 { "ignoreMemberSort": true } 選項時，此規則的不正確程式碼範例

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

memberSyntaxSortOrder

此選項採用一個包含四個預定義元素的陣列，元素的順序指定 import 樣式的順序。

預設順序為 ["none", "all", "multiple", "single"]。

有四種不同的樣式，預設的成員語法排序為

• none - 導入沒有匯出綁定的模組。
• all - 導入匯出綁定提供的所有成員。
• multiple - 導入多個成員。
• single - 導入單個成員。

必須在陣列中指定所有四個選項，但您可以自訂它們的順序。

使用預設的 { "memberSyntaxSortOrder": ["none", "all", "multiple", "single"] } 選項時，此規則的不正確程式碼範例

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

使用 { "memberSyntaxSortOrder": ['single', 'all', 'multiple', 'none'] } 選項時，此規則的正確程式碼範例

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

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

使用 { "memberSyntaxSortOrder": ['all', 'single', 'multiple', 'none'] } 選項時，此規則的正確程式碼範例

/*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

當為 true 時，規則僅檢查連續行上出現的 import 宣告陳述式的排序。預設值為 false。

換句話說，import 宣告陳述式之後的空行或註解行或包含任何其他陳述式的行將會重設 import 宣告陳述式的排序。

使用 { "allowSeparatedGroups": true } 選項時，此規則的不正確程式碼範例

/*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

使用 { "allowSeparatedGroups": true } 選項時，此規則的正確程式碼範例

/*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

何時不應使用此規則

此規則是一種格式偏好設定，不遵守它不會對您的程式碼品質產生負面影響。如果 import 字母排序不是您程式碼標準的一部分，那麼您可以停用此規則。

相關規則

• sort-keys
• sort-vars

版本

此規則是在 ESLint v2.0.0-beta.1 中引入的。

資源

• 規則來源
• 測試來源