Reactのeslintの設定集(日本語訳)

この記事の概要と注意

2025年6月26日時点に書いています。年数が経つとルールも変わってくるので公式ドキュメント優先でお願いします。

ESLintとは

JsやTsでコードの間違いやスタイルの乱れなどを見つけてくれるツールです。

設定方法

ESLintv9（または v8.21.0 以降から導入された構成で設定していきます。(今回の場合)

eslint.config.ts

import eslintPluginImport from 'eslint-plugin-import';
import tseslint from 'typescript-eslint';

export default [
 ...tseslint.config({
   files: ['**/*.ts', '**/*.tsx'],
   parserOptions: {
     project: './tsconfig.json',
   },
 }),
 {
   rules: {
     semi: ['error', 'always'],
     quotes: ['error', 'single'],
     'no-console': 'warn',
   },
   plugins: {
     import: eslintPluginImport,
   },
 },
];

🔍 潜在的な問題 (Possible Problems)

事前にバグなどを対策します。

ルール	説明
no-unused-vars	未使用の変数を警告
no-undef	宣言されていない変数の使用を禁止
no-unreachable	returnなどの後に続くコードを検出
getter-return	getterにreturnがない場合を警告
no-async-promise-executor	async関数を Promise executor に使うことを禁止
no-cond-assign	if条件などに代入演算子を使うのを防ぐ
no-duplicate-imports	同じモジュールの重複インポートを禁止

💡 Suggestions（改善提案)

ベストプラクティスの提案です。

ルール	説明
prefer-const	再代入されない変数はconstに
no-console	console.log の使用を警告
no-var	varの代わりに let / const を推奨
prefer-template	文字列連結ではなくテンプレートリテラルを推奨
no-useless-catch	不要なtry/catchを警告
object-shorthand	オブジェクトリテラルで短縮記法を推奨

🧱 Layout & Formatting（レイアウトと整形）

コードのスタイル・整形を統一し、可読性を向上させます。

ルール	説明
semi	セミコロンの使用を強制（あり／なし）
quotes	シングル/ダブルクォートの統一
indent	インデント幅の統一（例：2スペース）
comma-dangle	末尾カンマの有無を統一
space-before-function-paren	関数宣言時の括弧の前のスペースを統一
key-spacing	オブジェクトのキーと値の間のスペースを強制
eol-last	ファイルの末尾に改行を要求

💡 Prettier を併用する場合、これらのルールは無効化されることがあります。

⚠️ Deprecated（非推奨）

将来的に削除されそうなルール(2025年6月25日時点)です。導入はおすすめできないです。

❌ Removed（削除済み）

すでにESLintから削除されているルールです。
ここは使用する必要がないということです。

Prettierとは

ESLintと併用できて、コードを整形してくれるものです。
よかったらこちらも調べてみてください。

公式ドキュメント

ChatGPTより厳選