import 順を整頓する

eslint-plugin-importimport/orderを有効にすることで、importブロックの並びがバラバラな時に基準に沿って並び替えてくれます。

準備

まずはインストールして、

yarn add -D eslint-plugin-import

以下の2行を.eslintrcなどの設定ファイルのextendsセクションへ追加します。

{
  "extends": [
    "...",
    "plugin:import/errors",
    "plugin:import/warnings"
  ]
}

これでimport系のrulesが使えるようになり、また以下のルールが有効に設定されました。

{
  "rules": {
    "import/no-named-as-default": [1],
    "import/no-named-as-default-member": [1],
    "import/no-duplicates": [1],
    "import/no-unresolved": [2],
    "import/named": [2],
    "import/namespace": [2],
    "import/default": [2],
    "import/export": [2],
    "...": "..."
  }
}

これではまだ整頓されません。

import/order を有効にする

整頓されるようにするにはimport/orderルールを自分で設定する必要があります。それには以下のような1行をrulesセクションに追加します。

{
  "...": "...",
  "rules": {
    "import/order": ["error"],
  }
}