eslintの設定ファイルに関するまとめ

はじめに

eslintの設定ファイルってかなりややこしいと思いませんか？
項目が多いので今までそれぞれが何を意味しているのかあまり深く考えずに使用してきました。
そんな設定ファイルについて簡単にまとめてみます。

ファイル形式

eslintの設定ファイルは.yml、.json、.js、.cjsのいずれかを指定できます。個人的にはコメントアウトが行えて馴染みのある.jsが好きです。

公式ドキュメントはこちら。

v 9.0.0以降について

Warning We are transitioning to a new config system in ESLint v9.0.0. The config system shared on this page is currently the default but will be deprecated in v9.0.0. You can opt-in to the new config system by following the instructions in the documentation.

ドキュメントにも記載がありますがファイル形式はeslint.config.jsへ移行中でv 9.0.0からはeslint.config.jsを使用する予定とのこと。現在の最新版は8.4.4なので次のメジャーアップデートからはeslint.config.jsを使用することになりそうです。

eslint.config.jsの場合の記述方法についても既にドキュメントが用意されていました。

https://eslint.org/docs/latest/use/configure/configuration-files-new

sourceTypeがmoduleのプロジェクトではこちらが使用できるようですが、exportを使えるようになるのはいいですよね。

設定項目

それぞれの設定項目についてまとめます。

env

global変数を事前に読み込むための項目です。

https://eslint.org/docs/latest/use/configure/language-options#specifying-environments

下記の場合はブラウザで定義されている変数（documentなど）やES2021で用意されている変数をeslintが事前に読み込んでくれます。

"env": {
  "browser": true,
  "es2021": true,
 }

これだけではなんのこっちゃという感じなので例を挙げます。

後述するrurlesで"no-undef": "error"（未定義の変数をいきなり呼び出すとエラーになる）を指定している場合にenvのbrowserをtrueに指定していないとdocumentを呼び出した際にerrorが発生します。

eslintのエラー

指定できる項目は多いですがbrowser、esXXXX、jestなどが使用頻度として高いのではないでしょうか。

parser

parserは下記のいずれかを使用しているプロジェクトの場合に設定が必要になります。

Prisma
TypeScript
Babel

それぞれに指定する値が決まっていて下記で確認ができます。

https://eslint.org/docs/latest/use/configure/parser

parserOptions

https://eslint.org/docs/latest/use/configure/language-options#specifying-parser-options

構文解析時のオプションを設定できます。主に使用するものはecmaVersionとsourceTypeです。

"parserOptions": {
  "ecmaVersion": "latest",
  "sourceType": "module"
}

ecmaVersion

eslintがES5がまでの構文しかサポートしていないため、ES5以降の構文を使用している場合にはecmaVersionの指定が必要です。基本的にlatestまたはenvで指定した同じバージョンを指定しておけば良い。

sourceType

import/export文を使用している場合はsourceTypeにmoduleを指定する必要がある。

plugins

rulesを拡張するための設定項目。 eslintの拡張パッケージをインストールした場合はこちらに追加していく。

例えばeslint-plugin-reactをインストールして使用する場合は下記のように記載する。

"plugins": ["react"]

eslintのpluginは基本eslint-plugin-xxxxで命名されているのでpluginsへ追加する際はeslint-pluginの省略が可能。

extendsとの関係

後述するextendsに追加した項目から暗黙的にpluginsが追加されることもある。 eslint-plugin-reactはまさにその例でextendsにplugin:react/recommendedを追加した場合にpluginsへreactの追加は不要となる。

※npmのインストールは必要

"plugins": [],
"extends": ["plugin:react/recommended"]

extendsと併せてpluginsへの追加が必要か不要かはpluginによって変わるため、pluginのドキュメントを確認する必要がある。また、こういった背景からpluginsとextendsは混同しがちなので、それぞれの役割を下記にまとめます。

項目	意味
plugins	rulesで使用できるruleを拡張するための設定。
extends	eslintrcファイル自体を拡張するための設定。

extends

eslintrcファイル自体を拡張するための設定。ここで追加された項目からeslintrcの各項目のデフォルト値が暗黙的に追加される。

例えばplugin:react/recommendedを追加した場合はparcerOptionsのecmaFeaturesが暗黙的に{ "jsx": true }になる。

"parserOptions": {
// 暗黙的に追加
//  "ecmaFeatures": { "jsx": true }
},
extends: ["plugin:react/recommended"]

extendsへの追加によって追加される項目については各pluginのドキュメントを確認する必要がある。

rules

eslintにwatchさせる項目を設定できる。各ルールについては公式ドキュメントで確認ができます。

https://eslint.org/docs/latest/rules/

pluginで追加されるルールについては各pluginのドキュメントで確認ができます。

eslint-plugin-react

設定方法についても公式に詳細が記載されているので説明は割愛します。

さいごに

理解をややこしくしている原因は主に以下2点だと思いました。

pluginsとextendsの違いがわかりづらい
extendsの挙動（暗黙的に他の設定項目が追加されたりされなかったりする点）

また、pluginの数が多くてドキュメントを追いきれないのも理由としてあげられそうです。概要だけ押さえてあとは都度、ドキュメントを確認するのが良いのではないかと思いました。

easy going tech

エンジニアリング、プログラミング学習のアウトプット