🪡

【React】eslint v9で@typescript-eslint/no-unused-varsをwarnにする(Next.js環境)

2025/01/28に公開

概要

開発の際に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