🪡
【React】eslint v9で@typescript-eslint/no-unused-varsをwarnにする(Next.js環境)
概要
開発の際にNext.jsのビルドを行う時に@typescript-eslint/no-unused-var
の設定で、エラーが出てしまいました。使用していない変数は削除すべきなのは置いといて、とりあえずビルドを通したいのでワーニングに設定変更するにはどうしたらよいか、少し調べたのでメモ書きを残しておきます。
前提
- Next.js環境でのビルドを前提とします。
- 使用したeslintは
9.17.0
になります。
eslint v9に関して
基本的には設定ファイルでwarnにすればいいのですが、[2023年]Next.js + eslint周りの設定の記事で紹介されている通り、v9になって設定のやり方に大きな変更が入ってます。この記事内容を念頭に設定追加を行います。
設定サンプル
Next.jsのドキュメントにあるConfiguration: ESLint | Next.jsを参考に、@typescript-eslint/no-unused-var
のwarn設定を追加します。
eslint.config.mjs
import { FlatCompat } from "@eslint/eslintrc";
const compat = new FlatCompat({
// import.meta.dirname is available after Node.js v20.11.0
baseDirectory: import.meta.dirname,
});
const eslintConfig = [
...compat.config({
extends: ["next/core-web-vitals", "next/typescript"],
rules: {
"@typescript-eslint/no-unused-vars": "warn",
},
}),
];
export default eslintConfig;
Discussion