ESLint の設定で import を自動整形する

はじめに

こんにちは！株式会社POLでエンジニアをやっている @show_kanamaru です！

POL は「研究者の可能性を最大化するプラットフォームを創造する」をビジョンに、理系学生に特化した採用サービス、および研究開発者・技術者に特化した転職/採用サービスの2サービスを運営しています。

今回は、コードの統一性担保／コードレビューの工数を削減するために、ESLint の設定で import を自動整形してみたいと思います！

背景

4月から新しいチーム体制になり、初めて一緒に働くメンバーがいたり、初めて触るプロダクトがあったり。POLでは複数のプロダクトを運営しているのですが、プロダクトごとに技術スタックや構成が違います。そんな中、新チームでのコードレビューで以下のような課題が出てきました。

・メンバーごとにコードの書き方がバラバラ
・毎回似たようなことをレビューしている

これを解決するために、フロントエンドのコーディング規約を作っていくことにしました。（なんとなくみんなの頭の中にあるだけで、ドキュメントとして言語化はされていなかった）

コーディング規約の中にはメンバーの認識を合わせる必要があるものももちろんありますが、フォーマット部分は Prettier や ESLint に任せてしまいたいですよね。

今回はその中でも import 部分の順番や改行をどのように設定しようとしているのかを紹介できればなと思います！

ライブラリの導入

今回は以下の2つのライブラリを導入します。

eslint-plugin-import
import の順番や改行をルール化して自動でフォーマットする

eslint-plugin-unused-imports
未使用の import を自動で削除する

yarn add -D eslint-plugin-import eslint-plugin-unused-imports

eslint-plugin-import の設定

import の順番のルールは以下のようにしたい。

①外部ライブラリ（React系 → その他 → Material-UI）
②絶対パスで指定したファイル
③相対パスで指定したファイル（同階層以外）
④相対パスで指定したファイル（同階層）

※1 ①〜④の間は改行を入れる
※2 ①〜④の中ではアルファベット順に並べる

上記を実現するために、以下のような設定ファイルを作成します。

// .eslintrc.js

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

それぞれについて説明していきます。

groups
import の順番を指定できます。

groups: [
    "builtin", // 組み込みモジュール
    "external", // yarn add したパッケージ
    "internal", // 自作モジュール
    "parent", // 親階層のファイル
    "sibling", // 同階層のファイル
    "index" // 同階層の index ファイル
]

new-lines-between
groups で設定した import の間の改行を指定できます。always を設定することで、group 間の改行がないとエラーを出すことができます。

"newlines-between": "always"

alphabetize
order を asc にするとアルファベット順に、caseInsensitive を true にすると大文字小文字を区別しなくなります。

alphabetize: { order: "asc", caseInsensitive: true }

pathGroups
groups に追加で細かい順番の設定ができます。
以下のように「 react から始まるライブラリは external グループの前」、「 @material-ui は external グループの後」などの設定が可能です。

pathGroups: [
    {
        pattern: "react**",
        group: "external",
        position: "before",
    },
    {
        pattern: "@material-ui/**",
        group: "external",
        position: "after",
    },
]

pathGroupsExcludedImportTypes
pathGroups は builtin または external モジュールでは機能しないらしい。

react は external モジュールになるので、pathGroups の react に関する pattern を適用するためには、以下のように pathGroupsExcludedImportTypes を設定する必要があります。

pathGroupsExcludedImportTypes: ["react"]

（pathGroupsExcludedImportTypes はこちらの issue を読むと理解が深まるかと）

eslint-plugin-unused-imports の設定

使用していない import を自動的に削除するために、eslint-plugin-unused-imports の設定をします。

@typescript-eslint/no-unused-vars の設定をしていると、以下のように二重にエラーが表示されてしまいます。

そのため、@typescript-eslint/no-unused-vars を off に。

"rules": {
    "@typescript-eslint/no-unused-vars": "off"
}

次に、eslint-plugin-unused-imports を plugins と rules に追加します。

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

これらの設定で、使用されていない import が自動的に削除されます！

VSCode の設定

これは言うまでもないかもしれませんが、毎回 ESLint を実行して確認するのは面倒なので、VSCode でコードを保存したタイミングで自動的にフォーマットしてくれるように設定しておきましょう。

// .vscode/settings.json

"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
}

おわりに

今回は eslint-plugin-import と eslint-plugin-unused-imports を使用して、import 周りのフォーマットを自動で整形してくれるようにしました。恥ずかしながら今さらこの辺りの整備をしていますが、これで本質的な部分のレビューに時間を使うことができるようになると思います。import 以外の部分でも積極的にフォーマッターに任せていきたいと思います！

そして、株式会社POL ではエンジニア、デザイナー、プロダクトマネージャーを大募集してます！お話しだけでも構いませんのでお気軽にお声がけください！！！

meety.net