ESLint Flat Config で @typescript-eslint/parser が読み込めない

要約

ESLint v9 系の Flat Config では、TypeScript 用パーサーを文字列名で指定する旧 .eslintrc の書き方は通用しない。typescript-eslint メタパッケージから parser を import し、languageOptions.parser に実体（モジュール）を渡すのが唯一の正しい方法。
エラーは Parsing error: ... was tried to load via ... や ESLint couldn't determine the plugin '@typescript-eslint' uniquely の形で出る。

よくある原因

1. 旧 .eslintrc の parser: '@typescript-eslint/parser' を eslint.config.js にコピペしている
2. @typescript-eslint/parser と @typescript-eslint/eslint-plugin を個別に扱い、推奨のメタパッケージ typescript-eslint を経由していない
3. parser の置き場所を parserOptions の下にしている（Flat Config では languageOptions.parser）
4. ESM / CJS 出力差で parser モジュールが default キー越しに入っているのを直接渡している

解決策

1. typescript-eslint を導入する

typescript-eslint 公式ドキュメント が推奨するメタパッケージを使う:

npm install --save-dev typescript-eslint

2. tseslint.config() で組み立てる

// eslint.config.js
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
 
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      parserOptions: {
        project: "./tsconfig.json",
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
);

tseslint.config は内部で parser をオブジェクトとして組み立ててくれるので、書き手は文字列名を意識する必要がない。

3. 直書きする場合は parser を実体で渡す

import tsParser from "@typescript-eslint/parser";
 
export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: tsParser,
      parserOptions: { project: "./tsconfig.json" },
    },
  },
];

文字列 "@typescript-eslint/parser" を渡すと parser is not a function 等で失敗する。

4. 旧 .eslintrc.* を撤去する

ESLint v9 は既定で .eslintrc.* を読まないが、ESLINT_USE_FLAT_CONFIG=false 等で互換モードに落ちていると新旧が混じってデバッグが難しくなる。
移行が完了した時点で旧設定ファイル・.eslintignore をすべて削除する。ignores は新 eslint.config.js の中に書き直す。