ESLintでimportの整列・追加・削除を自動化する

概要

ESLintのプラグインとVS Codeの設定でimportの追加・削除・整列を自動化して幸せになれる記事です。

こんな人におすすめ

• チーム間でimportの順番などのルールが決まっておらず。人によってフォーマットがバラバラなのが実は気になっている。
• 未使用のimportを消すのを忘れがち。
• コンポーネントやライブラリの関数を書いたら勝手にimportしてくれたら嬉しい。
• import周りを触るのがシンプルにめんどい。

使用するプラグインと設定

VS Codeの設定

• source.addMissingImports
  • importの自動追加に使用する
  • VS Codeで設定する

ESLintのプラグイン

• eslint-plugin-import
  • importの整列に使用するプラグイン
• eslint-plugin-unused-imports
  • 未使用のimportを削除に使用するプラグイン

ESLintのプラグインはnpmからインストールしておきましょう。

source.addMissingImportsの設定

setting.jsonに"source.addMissingImports"を追記するだけでOK。

"editor.codeActionsOnSave"は配列で指定することにより順番で実行されるので、importの自動追加 -> ESLintの順番で実行することができます。

自動追加 -> 自動整列の順番で実行したいので以下のように設定します。

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": [
    "source.addMissingImports",
    "source.fixAll.eslint",
  ],
}

eslint-plugin-importの設定

eslint-plugin-importは設定項目が割と多めです。
そんなに難しい項目はないのでざっくり解説していきます。

groups

整列する順番をグループ化することができます。
以下3つを押さえておけばOKです。

• builtin ... 組み込みモジュール
• external ... npmなどでインストールした外部ライブラリ
• internal ... 自作モジュール

newlines-between

グループごとに改行を入れるかどうかを指定します。

alphabetize

• orderは昇順か降順でどちらでソートするか指定します
• caseInsensitiveは大文字小文字を区別するか指定します

pathGroups

特定のパスパターンの時にグループ化したいものを指定できます。

patternにはグループ化したい文字列を指定します
groupとpositionはセットになっていて、どのgroupの前か後ろに整列させるか指定します。

各オプションの詳細は公式ドキュメントを参考にしてみてください

.eslintrc.json

{
  // ...略
  "plugins": [
    "import",
  ],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",  // 組み込みモジュール
          "external", // npmでインストールした外部ライブラリ
          "internal", // 自作モジュール
          [
            "parent",
            "sibling"
          ],
          "object",
          "type",
          "index"
        ],
        "newlines-between": "always", // グループ毎にで改行を入れる
        "pathGroupsExcludedImportTypes": [
          "builtin"
        ],
        "alphabetize": {
          "order": "asc", // 昇順にソート
          "caseInsensitive": true // 小文字大文字を区別する 
        },
        "pathGroups": [ // 指定した順番にソートされる
          {
            "pattern": "@/components/common",
            "group": "internal",
            "position": "before"
          },
          {
            "pattern": "@/components/hooks",
            "group": "internal",
            "position": "before"
          },
        ]
      }
    ]
  },
}

eslint-plugin-unused-importsの設定

pluginに追加してrulesに追記するだけでOK

.eslintrc.json

{
  // ...略
  "plugins": [
    "unused-imports"
   ],
   "rules": {
     "unused-imports/no-unused-imports": "error"
   },
}

おまけ

自作しているボイラープレートで使用しているESLintの設定ファイルを共有しておきます。

ESLintとprettierを併用しつつReact x TypeScriptを書く想定で設定しています。