Next.jsにeslintの導入

## 環境

```json
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "prepare": "husky install",
    "format": "prettier . --write",
    "lint": "eslint src",
    "lintfix": "eslint src --fix"
  },
  "dependencies": {
    "next": "^14.2.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^7.8.0",
    "@typescript-eslint/parser": "^7.8.0",
    "autoprefixer": "^10",
    "eslint": "^8.57.0",
    "eslint-config-next": "13.5.6",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "postcss": "^8",
    "prettier": "^3.2.5",
    "tailwindcss": "^3",
    "typescript": "^5"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

```

## 導入

最初に下記のコマンドを実行し、インストールをします。

```tsx
npm i - D eslint
```

次に下記コマンドを実行し、初期化を行います。

```tsx
npx eslint --init
```

そして、いくつか質問をされますが、ここはご自身の設定に合わせて回答してください。下記は自身の解答例を貼っておきます。

↓私の回答

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript

解凍した後に最後の質問で下記の内容を質問されるので、誤字シイの設定に合わせて回答してください。自身の回答も貼っておきます。

```tsx
@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
```

↓私の回答

✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

そしてパッケージをインストールしたのかなと思い、`package.json`内のscripsフィールドにlintの`"lint": "eslint src",`記述を追記して実行すると下記のワーニングが出ました。

```tsx
Oops! Something went wrong! :(

ESLint: 8.57.0

ESLint couldn't find the plugin "@typescript-eslint/eslint-plugin".

(The package "@typescript-eslint/eslint-plugin" was not found when loaded as a Node module from the directory "/Users/minto_000/Documents/ideaProjects/full/couple-compass-app/client".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install @typescript-eslint/eslint-plugin@latest --save-dev

The plugin "@typescript-eslint/eslint-plugin" was referenced from the config file in ".eslintrc.cjs".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
```

要するに、`**@typescript-eslint/eslint-plugin**`パッケージが見つからないのでコマンドを下記のコマンドを実行してくれというものでした。

```tsx
npm install @typescript-eslint/eslint-plugin@latest --save-dev
```

コマンドを実行すると下記のエラーが出ました。

```tsx
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: client@0.1.0
npm ERR! Found: @typescript-eslint/parser@6.21.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   @typescript-eslint/parser@"^5.4.2 || ^6.0.0" from eslint-config-next@13.5.6
npm ERR!   node_modules/eslint-config-next
npm ERR!     dev eslint-config-next@"13.5.6" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"7.8.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @typescript-eslint/parser@7.8.0
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^7.0.0" from @typescript-eslint/eslint-plugin@7.8.0
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"7.8.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
```

要するに`**@typescript-eslint/parser**`のバージョンが7以上必要みたいでした。下記のコマンドを実行してバージョンを7以上にしました。

```tsx
npm install @typescript-eslint/parser@latest --save-dev
```

その後に、再び下記のコマンドを実行してパッケージをインストールしました。

```tsx
npm install @typescript-eslint/eslint-plugin@latest --save-dev 
```

最後に`npm run lint`を実行して、下記のエラーが出る場合は`.eslint.cjs`内の記述を追記してみてください。

↓エラー内容例

```tsx
  5:5   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
```

```tsx
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "react"],
  rules: {
    "react/react-in-jsx-scope": "off",
  },
};

```

最後の`rules`の部分に書いてある内容を追記することで今回のエラーをスキップできます。また、今回のエラーは無視しても動くように対応されているので、スキップしていい内容になります。