ESLint、設定ファイルの記述方法

EslintやPrettierは、プログラミングを学習し始めて割とすぐに導入すると思いますが、ファイルの設定内容については後回しにする人が多いと思います（僕がそうでした)。 今回は、設定ファイルで記述できるオプションについて簡単にまとめました。

ファイルの記述方法

.eslintrc.jsで設定するコーディングのルールを決めることができます。 jsの他にも、yml 、json形式で記述できます。

よく使うオプション

env

グローバル変数を設定できます。 ブラウザ内で使うメソッドをeslintに認識してもらうためには、browserをtrueにします。

parserOptions

構文解析の仕様を指定できます。

parserとは 何らかの言語で記述された構造的な文字データを解析し、プログラムで扱えるようなデータ構造の集合体に変換するプログラムです。

要はこのparserによって解析の仕方が変わるということです。 デフォルトでは、TypeScriptを認識できません。TypeScriptを使用するときは、"@typescript-eslint/parser"を使用します。

plugins

追加のプラグインが指定できます。

プラグインとはITの分野では、ソフトウェアに機能を追加する小さな部品のことを指します。 例えば、tailwind.cssの独自のルールを使用したい場合は、eslint-plugin-tailwindcssをインストールし、ルールに追加します。 また、import文を自動で並べ替えてくれるpluginなどもあります。

ただ、プラグインを追加すれば、その全てのルールが自動的に適用されるわけではなく、後述するルールを設定して適用します。

extends

ルールを一つずつ設定するのは、現実的ではないです。 そのため、Extendsを使うとESLintが公式に挙げているルールセットなどを取得してルールに反映することができます。

コード整形はPrettierに任せることが一般的だと思いますが、ESLintでは競合しないよう、コード整形に関するルールをPrettierに任せることができます。その際に有用なのがeslint-config-prettierです。

複数のルールセットを指定すると重複したルールは後から指定したルールが反映されます。 Prettierは一番最後に設定するのが良いです。

extendsとpluginsの違いが難しいですが、pluginsはルールを拡張・追加するもの、extendsはルール全体を拡張・設定するもののようなニュアンスだと思います。

こちらの記事が、分かりやすいです。 https://blog.ojisan.io/eslint-plugin-and-extend/

rules

一つ一つのルールをカスタマイズすることができます。 ESLintのデフォルトルールと違う細かいルールを指定したい場合に記述します。

overrides

ルールを上書きする際に使用します。

プロジェクト全体ではなく、一部のファイルだけルールを適用外にすると言ったケースに使用します。

例えば、Next.jsのプロジェクトではpages配下のpathにあたるコンポーネントは default exportを使う決まりがありますが、通常のコンポーネントではdefault exportを使いたくない場合に、pages配下だけdefaultを許可することができます。

まとめ

初学者には、設定ファイルを自分で一からカスタマイズするのは、ハードルが高いです。まずは、会社の先輩や自分の目標となるエンジニアのファイルを模倣して、どんなルールを指定しているのかを勉強するのが良いと思います。