ESLintでReactのimport順番を整理する

公開: 2024-01-28

Reactでimportが増えてきたので自動で並び替えたいと思い、ESLintを使って自動整理してみました。この記事は、ESLintのインストールと実行方法が分かる前提で進めます。

eslint-plugin-importをインストールする

npm install eslint-plugin-import --save-dev

package.jsonに依存関係が追加された

"devDependencies": {
    "eslint-plugin-import": "^2.29.1",
},

eslint設定ファイル

設定ファイル.eslintrc.jsにimportのルールを記述していく。

"plugins": [
    "import"
],
"rules": {
    "import/order": [
      "error",
      {
        groups: [
            "builtin",
            "external",
            "internal",
            "parent",
            "sibling",
            "index"
        ],
        "newlines-between": "always",
        alphabetize: { order: "asc", caseInsensitive: true },
        pathGroups: [
          {
            pattern: "react**",
            group: "builtin",
            position: "before",
          },
          {
            pattern: "@material-ui/**",
            group: "external",
            position: "after",
          },
        ],
        pathGroupsExcludedImportTypes: ["react"],
      },
    ]
  }

設定の説明

基本項目：

"error": このルールに違反した場合、エラーとして警告する
groups: インポートのグループとその順序を定義
- "builtin": Node.jsのビルトイン（組み込み）モジュール
- "external": 外部モジュール（例：npmパッケージ）
- "internal": プロジェクト内部のモジュール
- "parent": 親ディレクトリからの相対インポート
- "sibling": 同一ディレクトリ内の相対インポート
- "index": 現在のディレクトリからのインポート

その他オプション：

"newlines-between": "always": 異なるグループのインポートの間に空行を入れる
alphabetize: アルファベット順の並びを定義
- order: "asc": 昇順
- caseInsensitive: true: 大文字小文字を区別しない

参考ソース

eslint-plugin-import - npm