うわっ...私の.eslintrc、無駄が多すぎ...？

例えばこんな.eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "plugins": [
    "@typescript-eslint",
    "react"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }
}

最近ESLintの設定を見直すことがあったのですが、完全に上のような設定を書いていました。。
実は重複が多く、こんな感じで省略しても同じ設定になります。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier",
  ],
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }
}

.eslintrcのextends設定

recommendedなどを使うときにextendsを使いますが、公式ドキュメントの説明はこうです。

A configuration file, once extended, can inherit all the traits of another configuration file (including rules, plugins, and language options) and modify all the options

簡単にいうと、あらかじめ用意されている設定を読み込んでおき、上書きで設定を追加・変更できるということです。冒頭の例ではこの5つをextendsに含めています。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  ...

では実際はどのような設定をextendしているのか見てみましょう。

extends設定のソースコードの追い方

eslint:recommended だけちょっと特殊なので最後に説明します。

plugin: がついているもの

公式ドキュメントを要約すると

• plugin:の後にパッケージ名/設定名を指定する
• パッケージ名は eslint-plugin- は省略した形で指定できる
  • (書いてないけど) @スコープがあるときは @スコープ/eslint-plugin の eslint-plugin は省略できる

{
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:react/recommended",
  ],
  ...

よって、ソースコードを探しに行く場合は以下のようになります。

extends	ソースコードがあるパッケージ
"plugin:@typescript-eslint/recommended"	@typescript-eslint/eslint-plugin
"plugin:react/recommended"	eslint-plugin-react

plugin:@typescript-eslint/recommended、plugin:@typescript-eslint/eslint-recommended の設定

GitHubにソースコードがありました。ここに recommended と eslint-recommended の設定がありそうです。
https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin

ようやくrecommend設定を見つけることができました。よく見ると設定の中でさらにextendsしています。

...

export = {
  extends: ['./configs/base', './configs/eslint-recommended'],
  rules: {
    ...

./configs/baseはこうなっていました。

export = {
  parser: '@typescript-eslint/parser',
  parserOptions: { sourceType: 'module' },
  plugins: ['@typescript-eslint'],
};

そうです！ここでparser,parserOptions,pluginsの設定がしてあります！
ということは冒頭の例では書かなくてもextendsによってすでに設定されているものがあるので、削除することができます。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended", // ここに設定されている
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "plugins": [
-    "@typescript-eslint",
    "react"
  ],
-  "parser": "@typescript-eslint/parser",
  "parserOptions": {
-    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }
}

さらにrecommend設定の中で './configs/eslint-recommended' もextendsしており、追ってみると plugin:@typescript-eslint/eslint-recommended と同じ設定を見ていました！ということで plugin:@typescript-eslint/eslint-recommended も削除することができます。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended", // ここに設定されている
-    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }
}

plugin:@typescript-eslint/reactの設定

同様に、eslint-plugin-reactのソースコードはこちらにありました。
https://github.com/yannickcr/eslint-plugin-react

そしてrecommend設定を見てみると、

module.exports = {
  ...
  configs: {
    recommended: {
      plugins: [
        'react'
      ],
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        }
      },
      rules: {
        ...

ここにもplugins,parserOptions設定がありました！
ということで重複している設定は削除できます。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended", // ここに設定されている
    "prettier"
  ],
-  "plugins": [
-    "react"
-  ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }
}

plugin:がついていないもの

公式ドキュメントを要約すると

• パッケージ名を指定する
• ただしパッケージ名から eslint-config- は省略した形で指定できる
  • (書いてないけど) @スコープがあるときは @スコープ/eslint-config の eslint-config は省略できる

{
  "extends": [
    "prettier"
  ],
  ...

よって、 ソースコードを探しに行く場合は以下のようになります。

extends	ソースコードがあるパッケージ
"prettier"	eslint-config-prettier

ありました。

https://github.com/prettier/eslint-config-prettier

index.tsを見てみたところrule設定のみで、ruleの内容も冒頭の設定とは重複はありませんでした。

eslint:recommended

eslint:プレフィックスのものは特殊で、ソースコードとしてはこのあたりで.eslintrcのextends設定を読んでいますが、ファイルとしてはeslint/eslintのconf/eslint-recommended.jsを設定しています。

https://github.com/eslint/eslint/blob/master/conf/eslint-recommended.js

最終的にはこのような設定

重複を取り除くとこのような設定になりました。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }
}

このようにすっきりしましたが、重複していても問題はないのでわかりやすさのために書いておくのもありかと思います。ただ知っておくことに損はないと思いましたのでこの記事を書きました。

注意点としては、.eslintrcの設定は下に書くほど優先が高い(上書きされていく)ので、順番をミスって設定変わってしまったということがあるかもしれないのと、提供されている設定はアップデートにより変更されるため、変更に追従する必要があるということかなと思います。

もし間違いなどあれば指摘ください🙇‍♂️
ちなみにextendsとpluginsの違いはこの記事がとてもわかりやすかったです。ありがとうございました。

https://blog.ojisan.io/eslint-plugin-and-extend

.eslintrcのenv設定についてもまとめてみたので、知りたい方はぜひ！
https://zenn.dev/kimromi/articles/546923b7281dcb

では快適なESLint生活を！