その変数使ってないよ警察をなだめる技（Next.js編）

VSCodeで拡張機能の「ESLint」を有効にしていると、開発途中で「その変数使ってないよ警察👮‍♂️」が大量発生して鬱陶しい💢ことがありますよね？

特に新規にプログラムを書き始めるときや、ランタイムエラーの原因を特定するためにコードをコメントアウトしているときに 'XXXX' is defined but never used. eslint (@typescript-eslint/no-unused-vars) で画面を赤色に染められるのは😑😑😑ですね～。

・・・というわけで、この厳しすぎる警告を、次のように「そっと」なだめる方法を紹介します。

Next.js 14の場合

プロジェクトフォルダ直下の .eslintrc.json というファイルを編集します。

■ 変更前

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

■ 変更後

{
  "extends": ["next/core-web-vitals", "next/typescript"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "warn"
  }
}

Next.js 15の場合

プロジェクトフォルダ直下の eslint.config.mjs というファイルを編集します。

■ 変更前

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
];

export default eslintConfig;

■ 変更後

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@typescript-eslint/no-unused-vars": "warn",
    },
  },
];

export default eslintConfig;

"warn" を "off" にすると、さらに控えめの「'XXXX' is defined but never used」になります。