ESlintとPretterを正しく理解して, VScodeに導入する(理解編)
前提
これはあらゆる記事を参考に著者がESlintとPretterを理解しようという記事です．
なので，参考記事をベタ貼り・コードがそのままなどがあると思います．
できるだけ，誤解がないように参考した部分と自分のところを分けます．
参考にさせていただける著者さまに悪意はないので，暖かい心で見守って欲しいです．
導入編 -> ESlintとPretterを正しく理解して, VScodeに導入する(導入編)
ESlintとは．
ESLint + Prettierの導入（パッケージ版 + VSCodeプラグイン版）[1]より
ESLint is ナニ？
JavaScript / Node の静的解析ツールです
要するに、コードで問題のある箇所を指摘してくれます。
（React/Vue等のJavaScriptフレームワークも利用可能）
はじめてのESLint[2]より
Linter。JavaScript/TypeScriptの構文（コードの書き方）が、スタイルガイドラインなどの指定したルールに違反してないかをチェックして、違反してたら指摘してくれたり、修正してくれたりする仕組みです。
ルールのチェックをどうやってるかというと、JavaScriptは、ASTという木構造で表現することができるので、ASTの構造に変換し、あらかじめ決めたルールにあってるかチェックする仕組みになってます。 こちら でASTに変換を試したりできます。
つまりは，コードに関するエラーなどをお知らせしてくれるツール．
パッケージ版 と VSCodeプラグイン版の棲み分け
自分でインストールするのと，VSCodeのプラグインの違いは？
パッケージ版 と VSCodeプラグイン版の棲み分け
##パッケージ版
ファイルを指定してコマンド実行する
##VSCodeプラグイン版
VSCodeで開いたファイルにリアルタイム実行 or ファイル保存時に実行する
なるほど，目視でエラーの〜〜〜〜を表示するには，プラグインの方が良さそう．
その代わり，プロジェクトごとに適用ルールを変えるなどは難しいらしい．（できるのかな？）
インストールの準備
今回は、npm を使ってESLintをインストールします。
プロジェクトごとにインストールするパッケージ・ライブラリを分けたいため、
それぞれの初期化をおこなった後にローカルインストールしていきます。
このパッケージとかライブラリが適用ルールにあたるみたい．
しかも，パッケージは公開しているものであれば，自分のに使えるらしい．
ってことは有名企業のコード規約をそのままなどもいける．
pluginsは、 ルール を追加する項目です。
npmを通して外部に公開されてるルールのpluginをインストールできます。pluginが持ってるルールを利用する際に、pluginsのプロパティに追記します。（後述しますが、extendsにて指定してる共有設定で、pluginsを指定してる場合もあるので、pluginsに指定しなくてもいい場合があります）
んで，ここらへんを理解するには，plugins, extends, rulesの理解が重要らしい．
plugins, extends, rulesの理解
以下，はじめてのESLint[2:1]の丸パクリです．
理解のために一部改変している点もあるので，元記事を見た方がわかりやすいかもしれません．
(1) plugins
pluginsは、 ルール を追加する項目です。
npmを通して外部に公開されてるルールのpluginをインストールできます。pluginが持ってるルールを利用する際に、pluginsのプロパティに追記します。（後述しますが、extendsにて指定してる共有設定で、pluginsを指定してる場合もあるので、pluginsに指定しなくてもいい場合があります）
ドキュメント には、以下のように書かれてます。
which third-party plugins define additional rules, environments, configs, etc. for ESLint to use.」
(2) extends
extendsは、 ルールの設定 を拡張してくれる共有設定を指定する項目です。 （ルールのオン/オフの設定してくれる外部の設定ファイルを読み込んでくれます。）
ルール設定が重複している場合、後から書いた方が優先になります。
実用例
例えば，extendsに次のように書かれてたとします．
extends: [
'airbnb',
],
この場合，実は外部の設定ファイルを読んでいる状態になります．
導入した外部ルールのパッケージの名前を .eslintrc.js に記載する際に名前を省略して指定できるので，実際に読んでいるコードは，eslint-plugin-airbnbになります．
結構，設定の外部読み込みみたいな部分は頻発に起こるみたい．ネスト構造的に．．．
はじめてのESLint[2:2]では，その設定を追跡しているので，より理解したい人は呼んで欲しいです．
（個人的にここまで深くしてくれるのはありがたかったです．）
(3) rules
- rulesは、 個別のルールの設定 を登録する項目です。
- extendsで指定した共有設定以外で個別に設定したい内容を記載します。
プロジェクトへのルールの決め方
プロジェクトに導入するルールの決め方（.eslintrc.js の設定内容の決めた際の考え方）は、ベースとなる extendsを選定し、個別に無効にしたいルールや例外パターンのルールを、rulesに追記する感じで書きます。
ルール候補 はじめてのESLint[2:3]より
- eslint-config-airbnb: Airbnb JavaScript Style Guid
- eslint-config-next: Next公式
- eslint-config-prettier: prettierと競合するフォーマットのルールを無効化
感覚としては，企業用，フレームワーク用，prettier(勉強)用？になっている気がしています．
Udemyとかはprettierを基本としているから勉強用認識でいます．
Prettier
ここで，「じゃあ，Prettierって？」となると思うので．その説明をします．
Prettier is ナニ？
コードフォーマッター（悪いコードを整形してくれる）
JavaScript、TypeScript、React、HTML、CSSなどに対応しています。
（ちなみに読み方は、プリティア です。）
端的にコードの整形をしてくれます。
スペースやインデント、文字列のクオートの統一
１行が長くなった場合は改行位置の調整を自動おこなう
コードに関するエラーなどをお知らせしてくれるツールであるESlintは自動でコードを直す機能があります．Pretterもコード整形なので，Prettierとルールのコンフリクトが発生します．
そこで，対処方法の一つとして, eslint側に, Prettier と競合する可能性のある eslintのルールを無効にする共有設定を追加することで対応できます．
以上
以上である程度の理解ができているので，次は導入に移ろうと思います．
導入編のページはまた別に作成します．
謝辞
参考にさせていただいたサイトさまへ
本当にありがとうございます．
Discussion