Zenn
⚛️

RemixをESLint v9 に対応させる

2024/07/28に公開
React
TypeScript
ESLint
Remix
tech

ESLint v9 では、設定方式に大きな変更が加えられ、Flat Configが導入されました。従来の ESLint 設定ファイル（.eslintrc.js など）では、設定が階層的に構造化されていましたが、flat config では設定がより直感的でシンプルになります。これにより、設定の競合や複雑な継承構造を避け、開発者がより簡単に設定を管理できるようになります。

Remix使ってサクッとアプリ作るかーと思っていたらESLintの設定をしていたっていうよくある時間の使い方をしました。v9の勉強になったのでいいか（？）。

ではRemixをv9に対応してきましょう。
本稿の設定ファイルは、 2024/07/28 に作成しています。

npm パッケージ

  • @eslint/js
    • eslint v9です
  • @eslint/compat
    • v9未対応プラグインを導入できるようにする
  • globals
    • 従来のenvはglobalsパッケージで設定します
  • typescript-eslint
    • parserとeslint-pluginに代替されます
  • eslint-plugin-react
    • いつもの
  • eslint-plugin-react-hooks
    • いつもの
  • eslint-plugin-jsx-a11y
    • いつもの
bun add -D eslint @eslint/compat eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks typescript-eslint globals

eslint コンフィグ

eslint.config.js
import globals from "globals"
import eslint from "@eslint/js"
import tseslint from "typescript-eslint"
import pluginReact from "eslint-plugin-react"
import pluginReactHooks from "eslint-plugin-react-hooks"
import pluginJsxA11y from "eslint-plugin-jsx-a11y"
import { fixupPluginRules } from "@eslint/compat"

export default tseslint.config(
  {
    ignores: ["node_modules", ".cache", "build", "public/build", ".env"],
  },
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: "latest",
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      sourceType: "module",
      globals: {
        ...globals.browser,
        ...globals.commonjs,
        ...globals.es2015,
      },
    },
  },
  //react
  {
    files: ["**/*.{ts,tsx}"],
    plugins: {
      react: pluginReact,
      "jsx-a11y": pluginJsxA11y,
      "react-hooks": fixupPluginRules(pluginReactHooks),
    },
    rules: {
      ...pluginReact.configs.recommended.rules,
      ...pluginReact.configs["jsx-runtime"].rules,
      ...pluginJsxA11y.configs.recommended.rules,
      ...pluginReactHooks.configs.recommended.rules,
    },
    settings: {
      react: {
        version: "detect",
      },
      formComponents: ["Form"],
      linkComponents: [
        { name: "Link", linkAttribute: "to" },
        { name: "NavLink", linkAttribute: "to" },
      ],
    },
  },
  {
    files: ["eslint.config.js"],
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
  },
  // custom rules
  {
    rules: {
      "@typescript-eslint/no-unused-vars": "warn",
    },
  },
)

v9未対応プラグインの導入

v9には、現状対応していないプラグインが存在します。これに対応する為、@eslint/compatを利用しつつ、rulesにも分解していきます。
Introducing ESLint Compatibility Utilities

古いパッケージ

@typescript-eslint/parser @typescript-eslint/eslint-plugin は古いパッケージとなりました。 typescript-eslint を使います。

VSCodeに対応する

FlatConfigを有効にします。

.vscode/settings.json
{
  "eslint.useFlatConfig": true
}

動作確認

bun run lint

Discussion