blog.mahoroi.com

ESLintで特定のimportを禁止する

-

ESLint を使って特定の import を禁止するルールについての内容です。

no-restricted-import

no-restricted-imports のルールを利用することで、特定の import に対して error を設定することができます。no-restricted-imports の構文はこんな感じ。

.eslintrc
{
  rules: {
    "no-restricted-imports": ["error", "import1", "import2"]
  }
}

もしくは：

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

このルールを適用して、以下の index.js に ESLint を実行すると：

index.js
import import1 from 'import1';

怒られます。

/app/sandbox/no-restricted-imports/index.js
  1:1  error  'import1' import is restricted from being used  no-restricted-imports

✖ 1 problem (1 error, 0 warnings)

パターン

パターンを指定することで特定のモジュール部の import だけを禁止することもできます。

.eslintrc
{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          "import1",
          "import2"
        ],
        "patterns": [
          "import1/private/*",
          "import2/*",
          "!import2/good"
        ]
      }
    ]
  }
}
index.js
// bad
import import1 from 'import1';
// good
import import1PublicModule from 'import1/public/module';
// bad
import import1PrivateModule from 'import1/private/module';
// bad
import import2Bad from 'import2/bad';
// good
import import2Good from 'import2/good';
/app/sandbox/no-restricted-imports/index.js
  2:1  error  'import1' import is restricted from being used                              no-restricted-imports
  6:1  error  'import1/private/module' import is restricted from being used by a pattern  no-restricted-imports
  8:1  error  'import2/bad' import is restricted from being used by a pattern             no-restricted-imports

使うかもしれない設定例

例えば lodash の代わりに ES module 形式の lodash-es を使う設定。

.eslintrc
{
  "rules": {
    "no-restricted-imports": ["error", {
      "name": "lodash",
      "message": "Use lodash-es instead!",
    }],
  }
}

moment を禁止して、date-fns or Luxon を使う設定とか。

.eslintrc
{
  "rules": {
    "no-restricted-imports": ["error", {
      "paths":  [{
        "name": "moment",
        "message": "Use date-fns or Luxon instead!"
      }]
    }]
  }
}

相対パスを禁止して、絶対パスを使う設定とか。

.eslintrc
{
  "rules": {
    "no-restricted-imports": ["error", {
      "patterns": [
        "./",
        "../"
      ]
    }]
  }
}

余談

相対パスを制限する設定は使い所も多そうです。

参考