ESLint の `eslint-disable-next-line` で警告を抑止できない

要約

eslint-disable-next-line が効かないときは、(1) ルール名の不一致、(2) JSX のコメント形式違反、(3) 対象行とのずれ、(4) --report-unused-disable-directives 由来の警告、のいずれか。公式の disabling rules ドキュメント に沿ってルール名とコメント位置を見直す。

よくある原因

1. ルール名の不一致: no-unused-vars と @typescript-eslint/no-unused-vars を取り違えるなど
2. JSX 内コメント形式: JSX 子要素として書く場合は {/* ... */} でないと parse されない
3. 対象行のずれ: 空行・別のコメントを挟むと -next-line の指す行が変わる
4. unused-disable 警告: 既に違反していない箇所に disable があると逆に警告される

解決策

1. ルール名を完全一致させる

エラー出力の末尾には (rule-id) が付く。
それをそのままコピーする。

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _unused = 1;

no-unused-vars (素のもの) と @typescript-eslint/no-unused-vars は別ルールなので、TypeScript プロジェクトでは後者を指定する。

2. JSX 内では JSX コメント形式を使う

return (
  <div>
    {/* eslint-disable-next-line react/no-unescaped-entities */}
    <p>It's working</p>
  </div>
);

JS の // 形式は JSX 子要素位置では構文エラーになるか、コメントとして処理されず効かない。

3. 対象行の直前に置く

// eslint-disable-next-line no-console
console.log("debug");   // ← 直前の disable が効く

空行や別コメントを挟むと、-next-line が指す行がずれて抑止されない。

4. 不要な disable を削除する

eslint --report-unused-disable-directives を CI で有効にしておくと、すでに違反していない箇所の disable が逆に警告される。CLI ドキュメント を参照しつつ、不要なコメントは消す。