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開発環境

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

2. Extendsを入れていく

【ESLint】個人テンプレートのESLintを改善するためにeslint-config-airbnbを調査してみる
 ESLintとPrettier、いい加減ちゃんと使えるようになろ。
設定: ESLint | Next.js ← こちら採用

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でtypescript-eslintを入れる

npm iの後.eslintrc.js修正(.eslint.jsはLegacyなんだね…)
Shared Configs | typescript-eslint

実行したら下記エラー

$ 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について

依存関係が大変なので一旦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

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

実行できた。

一旦終わり

Next.jsだったらこの辺を参考にしても良かったかも。
[2023年]Next.js + eslint周りの設定

typescriptのeslint, parserは入れたい。

(その２) typescript eslint導入

これに沿って進める（Legacy）
Getting Started | typescript-eslint
"plugin:@typescript-eslint/recommended"
"plugin:@typescript-eslint/stylistic"
追加

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

設定ファイル

出来上がった.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、無駄が多すぎ...？

素直にこの辺真似ても良さそう
[2023年]Next.js + eslint周りの設定

.eslintrc.json → .eslint.config.jsonへ移行

flat configというらしい。

利点

jsで書けるのでconfigファイル自体をリンティングできる。
jsだからコメント書けるのも良い。
色々シンプル。
ESLintのconfigがどのように変わり得るか（flat configとは何か）

Prettierの設定

今回は整形できるようにしたけど真面目にやってない。
ESLintとPrettier、いい加減ちゃんと使えるようになろ。

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

目的

環境

OS