React Router v7(Remix) に Eslint v9 を設定する

はじめに

Qitaのトレンドで以下のような面白い記事を見つけた。

【図解解説/初心者OK】Next.js不要？進化したReact Routerで技術記事アプリを作るチュートリアル【TypeScript/TailwindCSS】 - Qiita

はじめにみなさんこんにちは、Watanabe Jin(@Sicut_study)です。Reactが大好きな私にとってReactの歴史が大きく変わる瞬間に出くわしました。　　ついにReac…

qiita.com

Next.jsがいまいちしっくり来なかったので、試しに公式で勉強してみたところ面白そうだったため使ってみることにした。
使うにあたりEslintの設定をしたかったのだが、React Router v7のEslintについて検索してもあまり見当たらなかったでメモ
あとは、移行記事ばっかで初期設定の記事も少ない気がする….

今回のリポジトリは以下

tech-blog/remix_base_project at main · sonitan0803/tech-blog

色々備忘録. Contribute to sonitan0803/tech-blog development by creating an account on GitHub.

github.com

設定方法

プロジェクトの作成

プロジェクトは公式に従い以下のコマンドで実施

$npx create-react-router@latest my-react-router-app

Installation | React Router

reactrouter.com

パッケージのインストール

自分はpnpmを使っていたので以下のコマンドでインストール
npm,yarn等はpnpmの部分を置き換えれば良いかと

$ pnpm create @eslint/config@latest

設定は各々異なってくるとは思うが、自分は以下のように設定した。

✔ 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? · javascript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, eslint-plugin-react
✔ Would you like to install them now? · No / Yes
? Which package manager do you want to use? … 
  npm
  yarn
❯ pnpm
  bun

そうするとeslint.config.jsが生成される。

.vscodeの編集

自分はvscodeを使用しているため、vscode使用時にEslintの設定とPritterの設定が競合したりしないように設定をした。
まずは、以下のファイルを作成する.vscodeも最初はないので作成すること

.vscode/settings.json

settings.jsonには以下の記述を作成

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

設定ファイルの全容

兎にも角にも、実装全体が知りたいという方向けにまずは
全体の設定をのせる

import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import globals from "globals";
import tseslint from "typescript-eslint";

/** @type {import('eslint').Linter.Config[]} */
export default [
    { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
    { languageOptions: { globals: globals.browser } },
    {
        plugins: {
            import: eslintPluginImport, // eslint-plugin-import をオブジェクトとして指定
        },
    },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    pluginReact.configs.flat.recommended,
    {
        // JSX関連の無効化
        rules: {
            "react/jsx-uses-react": "off",
            "react/react-in-jsx-scope": "off",
            "no-empty-pattern": "off", // 空のオブジェクトパターンを許容
        },
    },
    {
        rules: {
            "no-console": "warn", // コンソールログをエラーとして扱う
        },
    },
];

設定ファイルの詳細

エラー修正

初期の設定だと、もともとのベースプロジェクト実装で以下のエラーになる

'React' must be in scope when using JS
Unexpected empty object pattern.eslintno-empty-pattern

上記問題を解決留守方法を先人の方がすでに書いてくださっていたので、そちらを参考に修正を行う
https://zenn.dev/ryuu/scraps/583dad79532879

実装は以下の要因青した

{
        // JSX関連の無効化
        rules: {
            "react/jsx-uses-react": "off",
            "react/react-in-jsx-scope": "off",
            "no-empty-pattern": "off", // 空のオブジェクトパターンを許容
        },
    },

動作確認用

今回は、ルールが適用されるかを確認したいので console.log でワーニングを出すルールを追加する。
no-console を追加することで実現が可能

{
        rules: {
            "no-console": "warn", // コンソールログをエラーとして扱う
        },
    },

一応公式のリンクも張っておく

no-console - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code qua...

eslint.org

おわりに

自分もEsLintはまだ、色々使いながら覚えているので
おすすめの設定があったら知りたいし、共有をしいきたい。