Next.jsにおけるESLint v9アップグレード備忘録

作成日：2024/10/31

概要

Next.jsがESLint v9に対応したので、アップグレード対応を行った。 基本的には、依存関係のアップグレードとFlat Configの対応がメインになる。

依存関係のアップグレード

nextとeslint関連の依存のバージョンを最新にアップグレードする。

npm i next@latest eslint@latest eslint-config-next@latest

Flat Configの対応

.eslintignoreの削除

.eslintignoreがサポートしなくなったので設定を移動

(node:8408) ESLintIgnoreWarning: The ".eslintignore" file is no longer supported. Switch to using the "ignores" property in "eslint.config.js": https://eslint.org/docs/latest/use/configure/migration-guide#ignoring-files

.eslintignore.jsonが下記のように記述になっていれば、

// .eslintignore.json
node_modules
out
.next

eslint.config.jsは下記の様になる。

// eslint.config.js
module.exports = [
  {
    ignores: ["node_modules", ".next", "out"],
  }
]

Flat Configのフォーマット対応

使用しているPluginがFlat Configのフォーマットに対応していない場合は@eslint/eslintrcのFlatCompatが使用できる。 https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config

Flat Config対応前が下記だとすれば、

// .eslintrc.json
{
  "extends": "package/plugin"
}

Flat Configのフォーマットに対応したeslint.config.jsは下記の様になる。

// eslint.config.js
const { FlatCompat } = require('@eslint/eslintrc');

const flatCompat = new FlatCompat();

module.exports = [
  ...flatCompat.extends('package/plugin'),
]

補足

下記のようなエラーが発生してFlatCompatで対応しきれない場合は、@eslint/compatを使用する。 https://eslint.org/blog/2024/05/eslint-compatibility-utilities/

TypeError: context.getScope is not a function

その場合は、下記のように@eslint/compatを使用する。

// eslint.config.js
const { fixupConfigRules } = require('@eslint/compat');
const { FlatCompat } = require('@eslint/eslintrc');

const flatCompat = new FlatCompat();

module.exports = [
  ...fixupConfigRules(flatCompat.extends('package/plugin')),
]

ルールの適用確認

最後にeslintの--print-configオプションを使用して、rulesに適用されているルールを確認する。

出力されたjsonを比較してrulesに適用されているルールに差分がなければOK（なはず）。

npx eslint --print-config <filename> > output.json

©Sey