ESLint 設定を作成する技術

ESLint は関連するパッケージが多く、また、活発に開発されていることもあり、設定するのに一苦労ということも多いツールです。そういった方向けに ESLint の設定を作るための基礎的な説明を書いてみました。

設定ファイルの拡張子

設定用のファイルとしてプロジェクトのルートディレクトリーに .eslintrc.yml もしくは .eslintrc.json を作成しましょう。一般的な開発用途であれば YAML か JSON で事足りるからです。 YAML と JSON のどちらを選ぶかはお好みでどうぞ。ちなみに ESLint は .eslintrc.* もしくは package.json 内の eslintConfig 設定を読んでくれます。

また、 package.json 内に設定を書くのは避けましょう。様々な理由で package.json は変更されるため、 Git 管理下において変更が ESLint に関連するものなのかどうかをファイル名から判別できないためです。

.eslintrc.js / .eslintrc.cjs は設定を動的に生成したいときに使用します。ただし、よほど特殊なことをしていない限り -c / --config オプションによる設定ファイルの指定で事足りるはずです。

基礎となる設定

以降、設定は YAML で記載していきます。個人的にスッキリ書けると感じているからです。

まず、すべての基礎となる設定を書きましょう。

.eslintrc.yml

---
root: true
extends:
  - eslint:recommended

root はプロジェクトのルートディレクトリーに置く設定ファイルに対して書くものです。 ESLint は設定のカスケーディングを許可しているため、これを書かないとトラブルに見舞われる可能性が高くなります。

extends は設定を流用するためのものです。効果的に ESLint を設定する上で必須となっています。

設定のカスケーディング

ESLint ではリンティング対象のファイルと同階層の設定ファイルを優先的に使用します。

次の構造を持つプロジェクトを考えます。

/
  .eslintrc.yml
  src/
    index.js
    lib/
      .eslintrc.yml
      util.js

この場合、それぞれのファイルのリンティングに使用される設定ファイルは次のようになります。

リンティング対象	使用される設定ファイル
/src/index.js	/.eslintrc.yml
/src/lib/util.js	/src/lib/.eslintrc.yml

設定の流用

extends は既存の設定を流用して新しい設定を作り出す方法です。

主に各ツール用の推奨設定を利用するために使うものとなります。もちろん、自分でベースとなる設定を作り、それを流用するために使うことも可能です。

ESLint は標準で eslint:recommended と eslint:all という設定のプリセットを持っています。上述した基礎設定は eslint:recommended を利用している例となります。ちなみに eslint:all のプロダクトへの利用は非推奨ですので注意しましょう。

設定集

eslint-config-prettier など、設定のみがまとめられたパッケージも存在します。 eslint-config- という接頭辞をつけられたものが該当します。世界中のエキスパートが考えた設定集と呼べるもので、扱いやすくまとまっています。

これらを使う際も extends に指定しますが、 eslint-config- 部分は省略しても良い、というルールがあります。もちろん、省略しなくとも構いません。

プラグインを使う

実際の開発においては TypeScript や Prettier など、効率を上げるためのツールを使用することが多いでしょう。その場合はそれぞれのツール向けの ESLint プラグインを利用しましょう。

よく使われるプラグインは README にインストールガイドが整備されており、それを読みながらインストールすることで特に問題なく使えるようになっています。英語が苦手な方でも機械翻訳などを活用すればわかる程度の文章量ですので、頑張ってみてください。

設定ファイル内でのプラグインの指定方法

プラグインは次のように、 eslint-plugin- という接頭辞がついていることが多いです。

• eslint-plugin-jest
• eslint-plugin-react
• etc

設定ファイル内の plugins に指定しますが、その際 eslint-plugin- を省略可能です。

.eslintrc.yml

root: true
plugins:
  - jest
extends:
  - eslint:recommended

プラグイン提供の設定集

プラグインは同時に、設定集を提供していることがあります。例えば eslint-plugin-jest では recommended 、 all 、 style の 3 つを提供しています。

これらを使う際は extends に指定する必要がありますが、その際の指定方法は独特です。大きく 2 段階に分かれます。

1. プラグインの指定
2. プラグイン内の設定集の指定

extends 内でプラグインを指定するためには plugin: という接頭辞をつける必要があります。この際、プラグイン名が eslint-plugin- ではじまるものであれば、 eslint-plugin- は省略可能です。

さらに、プラグインの指定に続けて / と設定集の名前を書きます。 eslint-plugin-jest が持つ recommended という設定であれば plugin:jest/recommended となります。

extends の指定方法まとめ

extends の指定は様々なルールがありますので、表にまとめました。

分類	分類の例	指定方法	指定方法の例
プリセット	eslint:recommended / eslint:all	そのまま書く	eslint:recommended
ファイルパス	~/mybesteslintrc.yml など	そのまま書く	~/mybesteslintrc.yml
パッケージ	@yourname/eslintrc など	そのまま書く	@yourname/eslintrc
設定集	eslint-config-prettier など	eslint-config- を省略して書く	prettier
プラグイン提供の設定集	eslint-plugin-react など	eslint-plugin- を省略し plugin: を接頭辞につけ、 / に続けて設定名を書く	plugin:react/recommended

extends の指定順

各プラグインや設定集のインストールガイドに書いてありますので、それを遵守していればおかしな挙動をすることはないはずです。

ただ、 extends に指定した配列の上から評価され、同一の設定項目は下にあるもので上書きされていくことには注意してください。次の順序を意識すると設定も読みやすくなります。

1. eslint:recommended
2. TypeScript など開発全体に関わるもの
3. Jest など特定ファイルに対するもの

例

例として、 TypeScript / Prettier / Jest / React を用いた設定ファイルを作ってみます。

TypeScript 用設定

まず TypeScript 用の設定を入れましょう。 @typescript-eslint パッケージを使います。

npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

インストールガイドを見ながら次のように設定ファイルを書き換えます。

.eslintrc.yml

---
root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended

Prettier 用設定

Prettier によるコード整形を使いますので、 ESLint ではコードスタイルに関するルールをオフにします。その際に有用なのが eslint-config-prettier パッケージです。

npm i --save-dev eslint-config-prettier

使い方は extends の最後に指定するだけです。

.eslintrc.yml

---
root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - prettier

Jest 用設定

eslint-plugin-jest パッケージを使いましょう。

npm i --save-dev eslint-plugin-jest

こちらも設定ファイルの extends に追加してあげましょう。

.eslintrc.yml

---
root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
  - jest
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:jest/recommended
  - prettier

React 用設定

eslint-plugin-react パッケージと eslint-plugin-react-hooks パッケージのふたつを使います。

npm i --save-dev eslint-plugin-react eslint-plugin-react-hooks

これらは README に沿って設定ファイルを書き換えましょう。

.eslintrc.yml

---
root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
  - jest
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:react-hooks/recommended
  - plugin:jest/recommended
  - prettier

これで完成です。

最後に

ここまでで説明した知識があれば自分好みの設定ファイルを作成できるようになります。