ESLintを使って、レイヤーを壊すimportに警告を出す

Sep 12, 2023

kaori

---

JavaScript で書かれている場合、import するモジュールを制御する方法に悩むことがあります。

ルールに則った ESLint を設定することで解決できる場合があります。

ESLint の設定

.eslintrc.jsonにno-restricted-importsのルールを追加します。 例えば、@/componentsのindex.tsxでエキスポートしているもののみを使用してほしい場合のルール。

  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          {
            "group": ["@/components/**"],
            "message": "Do not import internal components."
          }
        ]
      }
    ]
  }

便利なルールができたら追記していく予定です。

その他のルールの書き方はno-restricted-importsを参照してください。