できない.dev

ESLint の no-unused-vars が無視できない

no-unused-vars は変数・引数・型・ファイル単位で抑制方法が違う。
アンダースコア prefix / disable-next-line / overrides を使い分け、意図した未使用だけ通す設定にする。

#eslint#no-unused-vars#suppression#disable#rules

公開:

要約

no-unused-vars の抑制は「変数」「引数」「型」「ファイル単位」で方法が異なる。
公式の no-unused-vars ルール定義 に従い、argsIgnorePattern_ prefix を許可するのが最も標準的な書き方。

よくある原因

  1. 未使用引数の抑制設定が無い: コールバックで (req, res, next) を全部受け取りたい場合、argsIgnorePattern を指定しないと next で怒られる
  2. 型 import を値 import している: TypeScript で import { Foo } と書くと値として扱われ、型注釈にしか使っていないと未使用判定される
  3. テストファイルだけ別ルールにしていない: テスト用ヘルパで未使用関数を残したいケースで、共通ルールが効いてしまう
  4. disable コメントの位置ミス: eslint-disable-next-line直後 1 行のみ が対象。
    ブロック全体には効かない

解決策

1. argsIgnorePattern で _ prefix を許可

// eslint.config.js
export default [
  {
    rules: {
      "no-unused-vars": [
        "error",
        {
          argsIgnorePattern: "^_",
          varsIgnorePattern: "^_",
          caughtErrorsIgnorePattern: "^_",
        },
      ],
    },
  },
];

これで (req, res, _next) => {} のように _next と書けば警告されない。

2. import type に切り替える

// before
import { User } from "./types";
type Props = { user: User };
 
// after
import type { User } from "./types";
type Props = { user: User };

TypeScript プロジェクトでは typescript-eslint の no-unused-vars に置き換えると、型 import を正しく扱う。

3. ファイル単位の overrides

// eslint.config.js
export default [
  { rules: { "no-unused-vars": "error" } },
  {
    files: ["**/*.test.ts", "**/*.spec.ts"],
    rules: { "no-unused-vars": "off" },
  },
];

4. disable コメントを正しく使う

// eslint-disable-next-line no-unused-vars
const unused = 1;
 
/* eslint-disable no-unused-vars */
const a = 1;
const b = 2;
/* eslint-enable no-unused-vars */

disable-next-line は直後 1 行、disable ... enable で囲むとブロック全体に効く。
乱用するとレビューの意味が薄れるので、原則は _ prefix で意図を示すのが望ましい。

この記事は役立ちましたか?