【環境構築】ESLintとPrettierのインストール

## 目的
　ESLintとPrettierのインストール方法について書きます。また、コンフリクトを防ぐための、eslint-config-prettierのインストール方法についても書きます。
 
## 注意
　インストールはyarnを使っています。npmを使った場合の挙動は記述しておりません。
　npmなどを使うインストール方法はドキュメントに書いてありますので、そちらを参照してください。
 
## 目次
1. ESLintのインストール
1. Prettierのインストール
1. eslint-config-prettierのインストール
1. npm scriptsの設定
1. 総括
1. 参考

##  1. ESLintのインストール
　公式サイトの[クイックスタート](https://eslint.org/docs/latest/use/getting-started#quick-start)を行います。
 ```
$ yarn create @eslint/config
```
インストールできたら、解析したいファイルを選んで実行します
```
$ yarn run eslint ファイル名
```
実行できているようですが、上部にWarningが出ました。
```
Warning: React version not specified in eslint-plugin-react settings. 
See https://github.com/jsx-eslint/eslint-plugin-react#configuration .
```
eslint-plugin-reactのバージョンが設定されていないようです。書いてある通り、https://github.com/jsx-eslint/eslint-plugin-react#configuration をみます。

　先ほどのURLのホームページを読み進めると、[Configuration (new: eslint.config.js)](https://github.com/jsx-eslint/eslint-plugin-react?tab=readme-ov-file#configuration-new-eslintconfigjs)という項目が見つかります。eslintのバージョン9あたりから、eslintの設定は`eslint.config.js`に書かれているようです。eslintのバージョンは次のコマンドで確認できます。
```
$ yarn eslint -v
```
ただし、eslint-plugin-reactのバージョン設定方法は同じです。
 > The schema of the settings.react object would be identical to that of what's already described above in the legacy config section.（ドキュメントより引用）
 
eslint.config.mjsに以下のように追加します。
```
# eslint.config.mjs

export default [
  ...
  {settings: {
    react: {
      version: 'detect', # detectは使っているReactのバージョンを自動で参照してくれる。
    }
  }},
  ...
];
```
これで先ほどのエラーは解消しました。settings:の先頭に'{'をつけることに注意します。（少し手間取った）

## 2. Prettierのインストール
　[公式サイト](https://prettier.io/docs/en/install)に従ってインストールします。
 ```
 $ yarn add --dev --exact prettier
 ```
これを打ち込むと筆者の環境では権限がないと言われました。先頭にsudoをつけて、再度実行します
```
$ sudo yarn add --dev --exact prettier
```
正しく実行できたら。次のコマンドを打ち込んで、ファイルを作成します。
```
 $ node --eval "fs.writeFileSync('.prettierrc','{}\n')"
 $ node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
 ```
 実行してみます。（ファイルが綺麗な書き方になるので、独自の書き方をしている人は注意）
 ```
 $ yarn prettier . --write
 ```
綺麗な書き方になりました。

## 3.eslint-config-prettierのインストール
　eslintとprettierは正しく動きました。しかし先ほどのprettierのドキュメントを見ると次のように書いてあります。

> ### [ESLint (and other linters)](https://prettier.io/docs/en/install#eslint-and-other-linters)
> If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other.

　ESLintとPrettierを両方使うときは、eslint-config-prettier を使う必要があるようです。[インストール手順](https://github.com/prettier/eslint-config-prettier?tab=readme-ov-file#eslint-config-prettier)をみてeslint-config-prettierを次のコマンドでインストールします。
　しかし、手順通りに進めるとエラーが出ました。おそらくeslintがv9であることが原因です。下記のサイトを参考に、eslintの設定ファイルの形式が変わったv8.23.0にバージョンダウンします。

 https://engineer-blog.ajike.co.jp/nextjs_eslint/
```
$ yarn remove eslint
$ yarn add -D eslint@8.23.0
```
`package.json`を見るとeslntのバージョンが8.23.0になっていることを確認できます。
　そうしたら、eslint-config-prettierのインストールに取り掛かります。[インストール手順](https://github.com/prettier/eslint-config-prettier?tab=readme-ov-file#eslint-config-prettier)をみて進めます。
 ```
 $ npm install eslint eslint-plugin-react --save-dev
 ```
`eslint.config.mjs`に追加します。他の設定を上書きできるように、下に書くことに気をつけてください。（上から読み込まれる）
```
# eslint.config.mjs

import eslintConfigPrettier from "eslint-config-prettier"; # 追加

export default [
  ...
  {extends: ["plugin:react/recommended"]}, # 追加
  eslintConfigPrettier, # 追加
  {settings: {
    ...
  },
  rules: {               # 追加
    "indent": "error",   # 追加
  }                      # 追加
},
  ...
];
```
これで完了です。

そしたら確認のため、eslintを実行します。
 ```
 $ yarn run eslint ファイル名
 ```
 筆者の環境ではエラーが出ました。react-appが〜 という内容でした。下記のサイトを参考にコマンドを打ち込みます。
 
 https://stackoverflow.com/questions/73811319/eslint-failed-to-load-config-react-app-to-extend-from-when-making-changes-in

```
$ yarn add eslint-config-react-app -D
```
エラーが解消されました。
　prettierを実行したときはエラーは出ませんでした。

　筆者の環境ではeslintもprettierも動き、アプリケーションも立ち上がりました。以上でインストール作業を終わります。

## 4.npm scriptsの設定
　ここからはインストール方法と関係ありません。実行する際のコマンドの入力の仕方についてです。
　eslintとPrettierを実行するためのコードは長いです。これを短くする方法があります。それが、npm scriptsです。
　`package.json`の"scripts"に追加します。
```
# package.json

"scripts": {
    ...
    "lint": "eslint .",
    "fix": "yarn prettier . --write"
  },
```
'eslint'は'lint'、'prettier'は"fix"という名前で呼び出せるようにしました。実行の際は以下のようにして呼び出します。
```
$ npm run lint
$ npm run fix
```
このようにして、コマンドを短くすることができます。

## 5. 総括
　ESLintとPrettierを使った環境構築を行いました。バージョンによって設定方法が変わるため、ドキュメントが必要不可欠です。
　今回はインストールだけなので、設定はしていません。
　環境構築は難しいですが、ドキュメントの読み方、エラーの対処法は経験値となるので、次回の環境構築は少しスムーズにできるはずです。


## 6. 参考
https://eslint.org/

https://github.com/jsx-eslint/eslint-plugin-react#configuration


https://prettier.io/docs/en/install

https://github.com/prettier/eslint-config-prettier?tab=readme-ov-file#eslint-config-prettier

https://engineer-blog.ajike.co.jp/nextjs_eslint/

https://stackoverflow.com/questions/73811319/eslint-failed-to-load-config-react-app-to-extend-from-when-making-changes-in