TypeScript ESLint 設定入門：flat config で型チェックを有効にする

TypeScriptプロジェクトにESLintを導入する最小手順です。typescript-eslint v8以降は ESLint の新しい設定形式（flat config）をデフォルトで使います。

インストール

npm install --save-dev eslint typescript-eslint

typescript-eslint 1パッケージに parser・plugin・設定ヘルパーがすべて含まれています。以前の @typescript-eslint/parser と @typescript-eslint/eslint-plugin を個別にインストールする必要はありません。

設定ファイル（基本）

プロジェクトルートに eslint.config.mjs を作成します。

// eslint.config.mjs
import tseslint from 'typescript-eslint'

export default tseslint.config(
  tseslint.configs.recommended,
)

recommended には TypeScript でよく使われるルールが含まれています。

npx eslint src/

src/example.ts
  2:22  error  Unexpected any. Specify a different type     @typescript-eslint/no-explicit-any
  7:7   error  'unused' is assigned a value but never used  @typescript-eslint/no-unused-vars

型情報を使うルールを有効にする

recommended の上位にあたる recommendedTypeChecked を使うと、TypeScriptの型情報を使ったルールが追加されます。

// eslint.config.mjs
import tseslint from 'typescript-eslint'

export default tseslint.config(
  tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
)

tsconfig.json が必要です。

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true
  },
  "include": ["src"]
}

型情報を使うルールの例：

// Promise を await せず放置（no-floating-promises）
async function fetchData() {
  return Promise.resolve('data')
}

fetchData() // error: Promises must be awaited

src/example.ts
  7:1  error  Promises must be awaited  @typescript-eslint/no-floating-promises

no-floating-promises はバグの原因になりやすい「awaitし忘れ」を検出するルールで、型情報なしでは動きません。

`package.json` にスクリプトを追加する

{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix"
  }
}

npm run lint
npm run lint:fix

recommended vs recommendedTypeChecked の選び方

設定	型情報	速度	向いているケース
`recommended`	不要	速い	既存プロジェクトへの導入・CI コスト重視
`recommendedTypeChecked`	必要（tsconfig）	やや遅い	新規プロジェクト・型安全を厳密に保ちたい

旧設定形式（eslintrc）との違い

ESLint v9 から eslint.config.js（flat config）が標準になりました。旧形式（.eslintrc.json など）は v9 以降は非推奨です。

項目	旧形式（eslintrc）	新形式（flat config）
ファイル名	`.eslintrc.json` / `.eslintrc.js`	`eslint.config.js` / `.mjs`
parser 設定	`"parser": "@typescript-eslint/parser"`	`tseslint.config()` に組み込み済み
plugin 設定	`"plugins": ["@typescript-eslint"]`	同上
extends	`"extends": ["plugin:@typescript-eslint/recommended"]`	`tseslint.configs.recommended`

まとめ

やること	コード
インストール	`npm install --save-dev eslint typescript-eslint`
基本設定	`tseslint.configs.recommended`
型チェックあり	`tseslint.configs.recommendedTypeChecked` + `parserOptions`
Lint 実行	`npx eslint src/`

typescript-eslint v8 以降は flat config（eslint.config.mjs）を使う
型情報を使うルール（no-floating-promises など）を有効にするには recommendedTypeChecked と tsconfig.json が必要
旧形式（.eslintrc）は ESLint v9 以降非推奨