版本

no-restricted-imports

當使用 import 載入時，禁止指定的模組

Imports 是 ES6/ES2015 標準，用於使其他模組的功能在您目前的模組中可用。在 CommonJS 中，這是透過 require() 呼叫實作的，這使得此 ESLint 規則大致等同於其 CommonJS 對應規則 no-restricted-modules。

為什麼您會想要限制 imports？

  • 某些 imports 在特定環境中可能沒有意義。例如，Node.js 的 fs 模組在沒有檔案系統的環境中是沒有意義的。

  • 某些模組提供相似或相同的功能，想想 lodash 和 underscore。您的專案可能已標準化使用某個模組。您想要確保沒有使用其他替代方案，因為這會不必要地膨脹專案，並在一個相依性就足夠的情況下，提供兩個相依性的較高維護成本。

規則詳細資訊

此規則可讓您指定您不想在應用程式中使用的 imports。

它僅適用於靜態 imports，不適用於動態 imports。

選項

此規則同時具有字串和物件選項，以指定要限制的已匯入模組。

使用字串選項，您可以在規則選項陣列中指定要限制匯入的模組名稱作為值

"no-restricted-imports": ["error", "import1", "import2"]

字串選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", "fs"]*/

import fs from 'fs';

字串選項也限制模組被匯出，如此範例所示

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", "fs"]*/

export { fs } from 'fs';
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", "fs"]*/

export * from 'fs';

字串選項的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", "fs"]*/

import crypto from 'crypto';
export { foo } from "bar";

您也可以使用物件內的 name 和 message 屬性為特定模組指定自訂訊息，其中 name 的值是模組的名稱，而 message 屬性包含自訂訊息。（自訂訊息會附加到規則的預設錯誤訊息。）

"no-restricted-imports": ["error", {
    "name": "import-foo",
    "message": "Please use import-bar instead."
}, {
    "name": "import-baz",
    "message": "Please use import-quux instead."
}]

字串選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", {
    "name": "disallowed-import",
    "message": "Please use 'allowed-import' instead"
}]*/

import foo from 'disallowed-import';

paths

這是一個物件選項，其值為一個陣列，其中包含您要限制的模組名稱。

"no-restricted-imports": ["error", { "paths": ["import1", "import2"] }]

paths 的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { "paths": ["cluster"] }]*/

import cluster from 'cluster';

特定模組的自訂訊息也可以在使用具有 name 和 message 的物件的 paths 陣列中指定。

"no-restricted-imports": ["error", {
    "paths": [{
        "name": "import-foo",
        "message": "Please use import-bar instead."
    }, {
        "name": "import-baz",
        "message": "Please use import-quux instead."
    }]
}]

importNames

paths 中的此選項是一個陣列，可用於指定從模組匯出的某些綁定的名稱。在 paths 陣列內指定的匯入名稱會影響對應物件的 name 屬性中指定的模組，因此當您使用 importNames 或 message 選項時，必須先指定 name 屬性。

在 importNames 陣列內指定 "default" 字串將會限制匯入預設匯出。

"no-restricted-imports": ["error", {
  "paths": [{
    "name": "import-foo",
    "importNames": ["Bar"],
    "message": "Please use Bar from /import-bar/baz/ instead."
  }]
}]

當 paths 中的 importNames 具有 "default" 時的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { paths: [{
    name: "foo",
    importNames: ["default"],
    message: "Please use the default import from '/bar/baz/' instead."
}]}]*/

import DisallowedObject from "foo";

paths 中 importNames 的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { paths: [{
    name: "foo",
    importNames: ["DisallowedObject"],
    message: "Please import 'DisallowedObject' from '/bar/baz/' instead."
}]}]*/

import { DisallowedObject } from "foo";

import { DisallowedObject as AllowedObject } from "foo";

import { "DisallowedObject" as SomeObject } from "foo";
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { paths: [{
    name: "foo",
    importNames: ["DisallowedObject"],
    message: "Please import 'DisallowedObject' from '/bar/baz/' instead."
}]}]*/

import * as Foo from "foo";

paths 中 importNames 的正確程式碼範例

如果指定給預設匯出的本機名稱與 importNames 中的字串相同，則不會造成錯誤。

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { paths: [{ name: "foo", importNames: ["DisallowedObject"] }] }]*/

import DisallowedObject from "foo"
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { paths: [{
    name: "foo",
    importNames: ["DisallowedObject"],
    message: "Please import 'DisallowedObject' from '/bar/baz/' instead."
}]}]*/

import { AllowedObject as DisallowedObject } from "foo";

allowImportNames

此選項是一個陣列。allowImportNames 與 importNames 相反，允許在此陣列內指定的匯入。因此，它會限制模組的所有匯入，但指定的允許匯入除外。

注意：allowImportNames 不能與 importNames 一起使用。

"no-restricted-imports": ["error", {
  "paths": [{
    "name": "import-foo",
    "allowImportNames": ["Bar"],
    "message": "Please use only Bar from import-foo."
  }]
}]

paths 中 allowImportNames 的不正確程式碼範例

不允許除「AllowedObject」之外的所有匯入名稱。

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { paths: [{
    name: "foo",
    allowImportNames: ["AllowedObject"],
    message: "Please use only 'AllowedObject' from 'foo'."
}]}]*/

import { DisallowedObject } from "foo";

paths 中 allowImportNames 的正確程式碼範例

不允許除「AllowedObject」之外的所有匯入名稱。

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { paths: [{
    name: "foo",
    allowImportNames: ["AllowedObject"],
    message: "Only use 'AllowedObject' from 'foo'."
}]}]*/

import { AllowedObject } from "foo";

patterns

這也是一個物件選項，其值為一個陣列。此選項可讓您使用 gitignore 樣式的模式或正規表示式指定要限制的多個模組。

paths 選項採用確切的匯入路徑，而 patterns 選項可用於更彈性地指定匯入路徑，允許限制同一目錄內的多個模組。例如

"no-restricted-imports": ["error", {
  "paths": [{
    "name": "import-foo",
  }]
}]

此設定會限制匯入 import-foo 模組，但不會限制匯入 import-foo/bar 或 import-foo/baz。您可以使用 patterns 來限制兩者

"no-restricted-imports": ["error", {
    "paths": [{
      "name": "import-foo",
    }],
    "patterns": [{
      "group": ["import-foo/ba*"],
    }]
}]

此設定不僅使用 path 限制從 import-foo 的匯入，還使用 patterns 限制從 import-foo/bar 和 import-foo/baz 的匯入。

若要在使用 gitignore- 樣式模式時重新包含模組，請在模式前新增否定符號 (!)。 （請確保這些否定的模式放置在陣列中的最後面，因為順序很重要）

"no-restricted-imports": ["error", {
    "patterns": ["import1/private/*", "import2/*", "!import2/good"]
}]

您也可以使用正規表示式來限制模組（請參閱 regex 選項）。

patterns 選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { "patterns": ["lodash/*"] }]*/

import pick from 'lodash/pick';
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { "patterns": ["lodash/*", "!lodash/pick"] }]*/

import pick from 'lodash/map';
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { "patterns": ["import1/*", "!import1/private/*"] }]*/

import pick from 'import1/private/someModule';

在此範例中，"!import1/private/*" 不會重新包含 private 內的模組，因為如果否定符號 (!) 的父目錄被模式排除，則不會重新包含檔案。在此案例中，import1/private 目錄已由 import1/* 模式排除。（可以使用 "!import1/private" 重新包含排除的目錄。）

patterns 選項的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { "patterns": ["crypto/*"] }]*/

import crypto from 'crypto';
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { "patterns": ["lodash/*", "!lodash/pick"] }]*/

import pick from 'lodash/pick';
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { "patterns": ["import1/*", "!import1/private"] }]*/

import pick from 'import1/private/someModule';

group

patterns 陣列也可以包含物件。group 屬性用於指定用於限制模組的 gitignore 樣式模式，而 message 屬性用於指定自訂訊息。

使用 patterns 選項時，必須使用 group 或 regex 屬性。

"no-restricted-imports": ["error", {
    "patterns": [{
      "group": ["import1/private/*"],
      "message": "usage of import1 private modules not allowed."
    }, {
      "group": ["import2/*", "!import2/good"],
      "message": "import2 is deprecated, except the modules in import2/good."
    }]
}]

group 選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["lodash/*"],
    message: "Please use the default import from 'lodash' instead."
}]}]*/

import pick from 'lodash/pick';

此 group 選項的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["lodash/*"],
    message: "Please use the default import from 'lodash' instead."
}]}]*/

import lodash from 'lodash';

regex

regex 屬性用於指定用於限制模組的正規表示式模式。

注意：regex 不能與 group 一起使用。

"no-restricted-imports": ["error", {
    "patterns": [{
      "regex": "import1/private/",
      "message": "usage of import1 private modules not allowed."
    }, {
      "regex": "import2/(?!good)",
      "message": "import2 is deprecated, except the modules in import2/good."
    }]
}]

regex 選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    regex: "@app/(?!(api/enums$)).*",
}]}]*/

import Foo from '@app/api';
import Bar from '@app/api/bar';
import Baz from '@app/api/baz';
import Bux from '@app/api/enums/foo';

regex 選項的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    regex: "@app/(?!(api/enums$)).*",
}]}]*/

import Foo from '@app/api/enums';

caseSensitive

這是一個布林值選項，當為 true 時，會將 group 或 regex 屬性中指定的模式設定為區分大小寫。預設值為 false。

"no-restricted-imports": ["error", {
    "patterns": [{
      "group": ["import1/private/prefix[A-Z]*"],
      "caseSensitive": true
    }]
}]

caseSensitive: true 選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["foo[A-Z]*"],
    caseSensitive: true
}]}]*/

import pick from 'fooBar';

caseSensitive: true 選項的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["foo[A-Z]*"],
    caseSensitive: true
}]}]*/

import pick from 'food';

importNames

您也可以在 patterns 陣列內的物件中指定 importNames。在這種情況下，指定的名稱僅適用於關聯的 group 或 regex 屬性。

"no-restricted-imports": ["error", {
    "patterns": [{
      "group": ["utils/*"],
      "importNames": ["isEmpty"],
      "message": "Use 'isEmpty' from lodash instead."
    }]
}]

patterns 中 importNames 的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    importNames: ['isEmpty'],
    message: "Use 'isEmpty' from lodash instead."
}]}]*/

import { isEmpty } from 'utils/collection-utils';

patterns 中 importNames 的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    importNames: ['isEmpty'],
    message: "Use 'isEmpty' from lodash instead."
}]}]*/

import { hasValues } from 'utils/collection-utils';

allowImportNames

您也可以在 patterns 陣列內的物件中指定 allowImportNames。在這種情況下，指定的名稱僅適用於關聯的 group 或 regex 屬性。

注意：allowImportNames 不能與 importNames、importNamePattern 或 allowImportNamePattern 一起使用。

"no-restricted-imports": ["error", {
    "patterns": [{
      "group": ["utils/*"],
      "allowImportNames": ["isEmpty"],
      "message": "Please use only 'isEmpty' from utils."
    }]
}]

patterns 中 allowImportNames 的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    allowImportNames: ['isEmpty'],
    message: "Please use only 'isEmpty' from utils."
}]}]*/

import { hasValues } from 'utils/collection-utils';

patterns 中 allowImportNames 的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    allowImportNames: ['isEmpty'],
    message: "Please use only 'isEmpty' from utils."
}]}]*/

import { isEmpty } from 'utils/collection-utils';

importNamePattern

此選項可讓您使用正規表示式模式來限制匯入名稱

"no-restricted-imports": ["error", {
    "patterns": [{
      "group": ["import-foo/*"],
      "importNamePattern": "^foo",
    }]
}]

importNamePattern 選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    importNamePattern: '^is',
    message: "Use 'is*' functions from lodash instead."
}]}]*/

import { isEmpty } from 'utils/collection-utils';
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["foo/*"],
    importNamePattern: '^(is|has)',
    message: "Use 'is*' and 'has*' functions from baz/bar instead"
}]}]*/

import { isSomething, hasSomething } from 'foo/bar';
在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["foo/*"],
    importNames: ["bar"],
    importNamePattern: '^baz',
}]}]*/

import { bar, bazQux } from 'foo/quux';

importNamePattern 選項的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    importNamePattern: '^is',
    message: "Use 'is*' functions from lodash instead."
}]}]*/

import isEmpty, { hasValue } from 'utils/collection-utils';

您也可以使用此選項來僅允許副作用匯入，方法是將其設定為與任何名稱比對的模式，例如 ^。

importNamePattern 選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    importNamePattern: "^"
}]}]*/

import isEmpty, { hasValue } from 'utils/collection-utils';

import * as file from 'utils/file-utils';

importNamePattern 選項的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    importNamePattern: "^"
}]}]*/

import 'utils/init-utils';

allowImportNamePattern

這是一個字串選項。與 importNamePattern 相反，此選項允許與指定正規表示式模式比對的匯入。因此，它會限制模組的所有匯入，但指定的允許模式除外。

注意：allowImportNamePattern 不能與 importNames、importNamePattern 或 allowImportNames 一起使用。

"no-restricted-imports": ["error", {
    "patterns": [{
      "group": ["import-foo/*"],
      "allowImportNamePattern": "^foo",
    }]
}]

allowImportNamePattern 選項的不正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    allowImportNamePattern: '^has'
}]}]*/

import { isEmpty } from 'utils/collection-utils';

allowImportNamePattern 選項的正確程式碼範例

在遊樂場中開啟
/*eslint no-restricted-imports: ["error", { patterns: [{
    group: ["utils/*"],
    allowImportNamePattern: '^is'
}]}]*/

import { isEmpty } from 'utils/collection-utils';

何時不應使用它

如果您希望能夠在專案中匯入模組而沒有 ESLint 錯誤或警告，請不要使用此規則，或不要在此規則的清單中包含模組。

版本

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

資源

編輯此頁面
© OpenJS 基金會和 ESLint 貢獻者，www.openjsf.org。內容根據 MIT 許可授權。
變更語言