環境構築

Parsing error: Unexpected token (ESLint)

ESLintがコードを解析できない

こんな症状

ESLintに「Parsing error: Unexpected token」と言われる。コードのバグではなく、ESLint側の設定（パーサーや対応する構文のバージョン）が追いついていないのが原因のことが多いよ。

まず試す

TypeScriptなら @typescript-eslint/parser を入れて parser に指定。新しい構文なら ecmaVersion を latest にする。

env

// eslint.config.js（flat config）の例
import tsParser from "@typescript-eslint/parser";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: { parser: tsParser },
  },
];

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓TypeScript / JSX を解析しようとした
→ @typescript-eslint/parser を入れて parser に指定。JSXは ecmaFeatures: { jsx: true } を足す。
✓?. など新しい構文でエラー
→ parserOptions の ecmaVersion を latest にする。
✓import/export を使っている
→ sourceType を module に設定する。

なぜ起きる？

ESLintのパーサー設定が、書いているコードの構文に対応していないよ。よくあるのは3つ。(1) TypeScript（.ts/.tsx）やJSXを、デフォルトのJavaScript用パーサーで解析しようとしている。 (2) 設定のecmaVersionが古くて、?.（オプショナルチェーン）など新しい構文を知らない。 (3) import/exportを使っているのにsourceTypeがmoduleになっていない。つまり「コードが間違っている」のではなく「ESLintの設定がコードに追いついていない」ケースが大半だよ。ただし本当に構文ミス（括弧の閉じ忘れ等）の場合もあるので、エラー位置のコードも一応確認しよう。

✕ エラーが起きるコード

$ npx eslint src/app.ts
# Parsing error: Unexpected token :
# （デフォルトパーサーはTypeScriptの型注釈を解析できない）

✓ 直したコード

// eslint.config.js（flat config）の例
import tsParser from "@typescript-eslint/parser";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: { parser: tsParser },
  },
];