ESLint: Parsing error の原因と解決策

概要

ESLint: Parsing error は、ESLintがソースコードを正しく解析できない場合に発生するエラーです。TypeScript構文をJavaScriptパーサーで解析しようとした場合や、ESLintの設定ファイルが正しく構成されていない場合に頻繁に発生します。

エラーメッセージ

Parsing error: Unexpected token

Parsing error: '>' expected

Parsing error: The keyword 'import' is reserved

Parsing error: Cannot read file './tsconfig.json'

原因

TypeScriptパーサーが未設定: TypeScriptファイルをデフォルトのESLintパーサーで解析しようとしている
ESLint設定ファイルの形式誤り: Flat Config（eslint.config.js）と旧形式（.eslintrc）の混在
parserOptionsの不足: ecmaVersionやsourceTypeの設定が不適切
tsconfig.jsonのパス不正: TypeScript ESLintのproject設定が間違っている
JSX構文の未対応: ecmaFeatures.jsxが設定されていない

解決策

1. TypeScript用パーサーをインストール・設定

1
2
# 必要なパッケージをインストール
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// eslint.config.js（Flat Config形式 - ESLint 9+）
import tsParser from "@typescript-eslint/parser";
import tsPlugin from "@typescript-eslint/eslint-plugin";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
        project: "./tsconfig.json",
      },
    },
    plugins: {
      "@typescript-eslint": tsPlugin,
    },
    rules: {
      ...tsPlugin.configs.recommended.rules,
    },
  },
];

2. 旧形式（.eslintrc）での設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

3. tsconfig.jsonのinclude設定を確認

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "compilerOptions": {
    "strict": true,
    "target": "ES2020",
    "module": "ESNext"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "eslint.config.js"
  ]
}

ESLint用の別tsconfigを作成する方法もあります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// tsconfig.eslint.json
{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "*.config.ts",
    "*.config.js"
  ]
}

eslint.config.jsで parserOptions: { project: "./tsconfig.eslint.json" } を指定します。

4. React/JSXのパース設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// eslint.config.js
import tsParser from "@typescript-eslint/parser";
import reactPlugin from "eslint-plugin-react";

export default [
  {
    files: ["**/*.tsx", "**/*.jsx"],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    plugins: {
      react: reactPlugin,
    },
    settings: {
      react: {
        version: "detect",
      },
    },
  },
];

5. ESLint 8から9（Flat Config）への移行

1
2
# ESLint移行ツールを使用
npx @eslint/migrate-config .eslintrc.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 移行後のeslint.config.js
import js from "@eslint/js";
import tsPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";

export default [
  js.configs.recommended,
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: true,
      },
    },
    plugins: {
      "@typescript-eslint": tsPlugin,
    },
    rules: {
      ...tsPlugin.configs.recommended.rules,
    },
  },
  {
    ignores: ["dist/", "node_modules/", "*.config.js"],
  },
];

ESLint: Parsing error

概要