Next.jsで開発を始めるのでESLint, Prettierを設定した記録

React, Next.jsで開発を始めたのでLinter,FormatterとしてESLintとPrettierを導入した。
少し試行錯誤したのでその記録を残しておく。

ESLintだけでいいとか、チームで共有しやすくとか一旦考えずに自分の開発環境を整えるために進めた記録。

# 目的
- ESLint: 静的解析ツールとして使う
- Prettier: フォーマッターとして使う

# 環境
## OS
- Windows11
- Git Bash(bash 5.2.12)

## プロジェクト
- "next": "14.1.4"
- "react": "^18"
- "react-dom": "^18"

なおNext.jsでプロジェクトを作成済み。
各種コマンドはプロジェクト直下で実行。


# 手順

## 1. ベースの設定
[ESLint + Prettierを導入したTypeScript開発環境](https://zenn.dev/big_tanukiudon/articles/c1ab3dba7ba111#2.-.eslintrc.js%E3%81%AB-prettier-%E3%81%AE%E9%A0%85%E7%9B%AE%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)

- JSXで警告出る
- `type`を`Interface`へ変更や、アロー演算子の返り値は`{}`で囲めなど警告出る
(ここではまだlinter走らせていなかった。)

## 2. Extendsを入れていく
[【ESLint】個人テンプレートのESLintを改善するためにeslint-config-airbnbを調査してみる](https://zenn.dev/shuuuuuun/articles/127728961f89a0)
[ESLintとPrettier、いい加減ちゃんと使えるようになろ。](https://zenn.dev/crsc1206/articles/d92548257fb445)
[設定: ESLint | Next.js](https://nextjs.org/docs/app/building-your-application/configuring/eslint) ← こちら採用
### ESLint extends
- `"next/core-web-vitals"`を選択

### ESLint設定
- `eslint-plugin-react`
- `eslint-plugin-react-hooks`
を選択

- `npm install`でそれぞれインストール
- `eslintrc.json`の`extends`に追記
	- 重複があると無効化される？らしいので注意

### Prettierとの併用
`"next", "prettier"`を選択

### 推奨プラグインルールセット
`$ npm install --save-dev @next/eslint-plugin-next`
- `.eslintrc.json`の`extends`に追記


## 3. 試行錯誤
### 実行して確認
```
$ npm run lint
Failed to load config "standard-with-typescript" to extend from.
Referenced from: C:\Users\pupod\work\React.Sandbox\trello-tutorial\.eslintrc.js
```
だめだったので[Getting Started | typescript-eslint](https://typescript-eslint.io/getting-started)でtypescript-eslintを入れる

`npm i`の後`.eslintrc.js`修正(.eslint.jsはLegacyなんだね…)
[Shared Configs | typescript-eslint](https://typescript-eslint.io/users/configs#projects-with-type-checking)

実行したら下記エラー
```
$ npm run lint
Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js': Cannot find module '@typescript-eslint/eslint-plugin'
```
typescriptプラグインをインストール
`npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser`
既にインストール済みts parserのバージョンがコンフリクトしているためエラー

peerDependencyというのは指定されたバージョンを想定している依存関係のこと。
dependencyはそれがないと実行できない依存関係のこと。
[npm installでのCould not resolve dependencyエラーと--legacy-peer-depsについて](https://zenn.dev/minamiso/articles/78b22716f3338d)

依存関係が大変なので一旦ts-eslintを切る
```
extends: [
	// "plugin:@typescript-eslint/recommended-type-checked",
	// "plugin:@typescript-eslint/stylistic-type-checked",
]
```

実行でprettierがないというエラー
```
$ npm run lint
Failed to load config "prettier" to extend from.
Referenced from: C:\Users\pupod\work\React.Sandbox\trello-tutorial\.eslintrc.js
```

[ESLint couldn't find the config "prettier" to extend from - Stack Overflow](https://stackoverflow.com/questions/61597932/eslint-couldnt-find-the-config-prettier-to-extend-from)

`npm install --save-dev eslint-config-prettier`

実行できた。

# 一旦終わり
Next.jsだったらこの辺を参考にしても良かったかも。
[[2023年]Next.js + eslint周りの設定](https://zenn.dev/resistance_gowy/articles/91b4f62b9f48ec)

typescriptのeslint, parserは入れたい。



# (その２) typescript eslint導入
これに沿って進める（Legacy）
[Getting Started | typescript-eslint](https://typescript-eslint.io/getting-started)
`"plugin:@typescript-eslint/recommended"`
`"plugin:@typescript-eslint/stylistic"`
追加

実行で怒られるので下記の自己解決のコマンド（全部インストール）で解決
[Cannot find module '@typescript-eslint/eslint-plugin' によってbuildできない。](https://teratail.com/questions/349528)
実行できた。

## 設定ファイル
出来上がった`.eslintrc.json`、`package.json`

```.eslint.json
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "prettier",
        "next",
        "next/core-web-vitals",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/stylistic",
        "plugin:react-hooks/recommended",
        'plugin:@next/next/recommended',
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
    ],
    "rules": {
    }
}
```

```package.json
{
  "name": "trello-tutorial",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "debug": "NODE_OPTIONS='--inspect' next dev"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.29.9",
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "lucide-react": "^0.361.0",
    "next": "14.1.4",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^14.1.4",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^7.4.0",
    "@typescript-eslint/parser": "^7.4.0",
    "autoprefixer": "^10.0.1",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.1.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8",
    "prettier": "^3.2.5",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.4.3",
    "typescript-eslint": "^7.4.0"
  }
}
```

## 残タスク
### .eslintrc.jsonをスリムにする
[うわっ...私の.eslintrc、無駄が多すぎ...？](https://zenn.dev/kimromi/articles/b7cf98005f3193)

素直にこの辺真似ても良さそう
[[2023年]Next.js + eslint周りの設定](https://zenn.dev/resistance_gowy/articles/91b4f62b9f48ec)

### .eslintrc.json → .eslint.config.jsonへ移行
flat configというらしい。
#### 利点
jsで書けるのでconfigファイル自体をリンティングできる。
jsだからコメント書けるのも良い。
色々シンプル。
[ESLintのconfigがどのように変わり得るか（flat configとは何か）](https://zenn.dev/makotot/articles/0d9184f3dde858)

### Prettierの設定
今回は整形できるようにしたけど真面目にやってない。
[ESLintとPrettier、いい加減ちゃんと使えるようになろ。](https://zenn.dev/crsc1206/articles/d92548257fb445)