ESLintのPluginとExtendの違いの記事

ESLint の Plugin と Extend の違いの記事

読んだ。

正直、ESLint 関連のライブラリを設定するときにドキュメント通りにインストールして設定を書いて、という感じで進めていたので、全然知らなかった。

この記事はとても細かく詳しく書いてくれていて助かった。

たとえばeslint-plugin-prettierはよく使われてるやつで、これは Plugin だからルールの追加をする。

plugin は rules, environments, processors の実装や設定を提供できる

こういう感じ。

Extend はルールを追加で定める。

たとえば手元の.eslintrc.jsを覗いたりしてみると、

// ...
  extends: ['prettier', 'plugin:prettier/recommended'],
  plugins: ['prettier', 'unused-imports'],
// ...

こんな感じだった。

eslint-config-prettierの設定が 1 つめ、eslint-plugin-prettierの設定が 2 つめのplugin:prettier/recommendedだろう。

recommended の他に all もあったりする、とのことで、つまりはここで本来手動で 1 行ずつ書いていくルールをライブラリのほうで設定されているものに任したり、独自のルールを追加できるということなんだと思う。

shareable config という概念も出てきて、これが上の例でいうeslint-config-prettierに当たるとのこと。

これは rules 以外にも plugins や env の設定などもできるらしく、shareable config 自体に plugin の設定を含めることができるっぽい。

そして、Plugin が shareable config の提供もできる。

若干ややこしいが、shareable config を作るために Plugin を含めることができ、Plugin は shareable config を提供できるという、どちらにも干渉できるような感じっぽい。

なので、extends: ['prettier', 'plugin:prettier/recommended']は、

ということになる(はず)

全然知らなかった。勉強になった。