Closed20

Next.js 15でESLint 9 / Flat Configに移行する

Hirotaka MiyagiHirotaka Miyagi

Next.js 15でESLint 9のサポートが行われたので、このタイミングで移行を進める。

https://nextjs.org/blog/next-15#eslint-9-support

対象は個人のブログサイト↓

https://github.com/MH4GF/mysite

Hirotaka MiyagiHirotaka Miyagi

まずpackage.jsonでバージョンを上げてみる

https://github.com/MH4GF/mysite/commit/b1807121686f177a3fba4a0b49c0a94e6d902641

この状態で next lint を実行

pnpm lint:next           

> mysite@ lint:next /Users/mh4gf/ghq/github.com/MH4GF/mysite
> next lint

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=4.7.4 <5.5.0

YOUR TYPESCRIPT VERSION: 5.6.3

Please only submit bug reports when using the officially supported version.

=============
Error while loading rule '@typescript-eslint/naming-convention': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Occurred while linting /Users/mh4gf/ghq/github.com/MH4GF/mysite/app/(pages)/[slug]/_features/Content.tsx
 ELIFECYCLE  Command failed with exit code 1.

@typescript-eslintのパーサー周りでエラーになっている。

Hirotaka MiyagiHirotaka Miyagi

パースエラーは一旦置いておき、Flat Config移行をしてしまう
ESLintが提供するマイグレーションコマンドがあるとのことなので実行してみる

https://eslint.org/docs/latest/use/configure/migration-guide#migrate-your-config-file

npx @eslint/migrate-config .eslintrc.js  
Need to install the following packages:
@eslint/migrate-config@1.3.3
Ok to proceed? (y) y


Migrating .eslintrc.js

WARNING: This tool does not yet work great for .eslintrc.(js|cjs|mjs) files.
It will convert the evaluated output of our config file, not the source code.
Please review the output carefully to ensure it is correct.


Wrote new config to ./eslint.config.mjs

You will need to install the following packages to use the new config:
- @eslint/js
- @eslint/eslintrc

You can install them using the following command:

npm install @eslint/js @eslint/eslintrc -D

警告が出ており、JavaScriptによる設定ファイルの場合正しく動作しない可能性があるとのこと。式や文が含まれると難しいんだろうな。

Hirotaka MiyagiHirotaka Miyagi

この時点でも@typescript-eslintのパーサーエラーは出てるが、ちょっとだけメッセージは変わったな

pnpm lint:next                         

> mysite@ lint:next /Users/mh4gf/ghq/github.com/MH4GF/mysite
> next lint

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=4.7.4 <5.5.0

YOUR TYPESCRIPT VERSION: 5.6.3

Please only submit bug reports when using the officially supported version.

=============
Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.
Occurred while linting /Users/mh4gf/ghq/github.com/MH4GF/mysite/app/(pages)/[slug]/_features/Content.tsx
 ELIFECYCLE  Command failed with exit code 1.
Hirotaka MiyagiHirotaka Miyagi

Flat Configのキャッチアップ

Hirotaka MiyagiHirotaka Miyagi

パッケージが分かれているとデバッグがややこしいので、一旦@mh4gf/eslint-configの内容をコピーしてくる

https://github.com/MH4GF/mysite/commit/5ff97ca37cfe1bdf76f946b9ef33bcb8e06d9c11

Hirotaka MiyagiHirotaka Miyagi

各プラグインのREADMEを読みつつ、Flat Configに置き換えていった

https://github.com/MH4GF/mysite/commit/c712503dd6fb71c03040c77de875ae9bea95f2c0

使っていたのは以下のプラグインで、それぞれFlat Configに対応していた

  • typescript-eslint
  • eslint-plugin-import
  • eslint-plugin-unused-imports

これにより実行時エラーは出なくなったが、各ルールのエラーが出るように。これらはプラグインのアップデート漏れによるものかな。
typescript-eslintは 'plugin:@typescript-eslint/recommended-requiring-type-checking' から tseslint.configs.recommendedTypeChecked に変わったというのもあるので、含まれるルールが変わった可能性もあるかも。

pnpm lint:next

> mysite@ lint:next /Users/mh4gf/ghq/github.com/MH4GF/mysite
> next lint


./app/_components/ui/command.tsx
28:11  Error: An interface declaring no members is equivalent to its supertype.  @typescript-eslint/no-empty-object-type

./app/_features/command/items/CommandLinkItem.tsx
19:5  Error: Expected an assignment or function call and instead saw an expression.  @typescript-eslint/no-unused-expressions

./app/_features/command/items/SearchGroup.tsx
39:9  Warning: Unused eslint-disable directive (no problems were reported from 'import/no-unresolved').

./app/_features/markdownRenderer/elements/Paragraph.tsx
23:3  Error: Include a description after the "@ts-expect-error" directive to explain why the @ts-expect-error is necessary. The description must be 10 characters or longer.  @typescript-eslint/ban-ts-comment

./app/_features/richLinkCard/__tests__/getOGP.test.ts
1:1  Warning: Unused eslint-disable directive (no problems were reported from 'import/no-unresolved').

./app/_features/viewTransition/isSameOrigin.ts
8:28  Error: Unexpected constant truthiness on the left-hand side of a `||` expression.  no-constant-binary-expression

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ELIFECYCLE  Command failed with exit code 1.
Hirotaka MiyagiHirotaka Miyagi

FlatCompatを消す作業

Hirotaka MiyagiHirotaka Miyagi

@mh4gf/eslint-config をFlat Config対応する

プラグインのマイグレーションガイドを見ながらやっていく

https://eslint.org/docs/latest/extend/plugin-migration-flat-config

このスクラップは22日前にクローズされました