ESLint で Parsing error: Unexpected token = エラーが発生する

経緯

ESLint で以下のエラーが発生するようになったので対処。

PATH/TO/PROJECT/src/jshoge.js
XX:XX error Parsing error: Unexpected token =

対処

原因としては、 ECMAScript のパブリッククラスフィールドの構文で記述しているコードがあったため。

class Hoge {
    fuga = (elms) => { // ここの fuga = ... の部分
        // 処理
    };
};

export default Hoge;

これに対して ESLint の設定(.eslintrc.json)は以下のようになっていた。

{
    "env": {
        "browser": true,
        "es6": true,
        "jquery": true
    },
    // 略
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // 略
}

先述のパブリッククラスフィールドは ECMAScript2022 で利用できるようになった構文なので、この設定ではエラーになるのは道理。

そのため、 "es6": true, を "es2022": true, に、 "ecmaVersion": 2018, を "ecmaVersion": 13, に置き換えることで解決しました。

{
    "env": {
        "browser": true,
        "es2022": true,
        "jquery": true
    },
    // 略
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    // 略
}

ちなみに何故か "es2022": true, のみでは解決できませんでした。 ecmaVersion も明示する必要があるようです。

参考

• ESLintでParsing error…となった時の対応　parserOptionsを設定する｜SHIFT Group 技術ブログ｜note
• ESLintで Parsing error: Unexpected token = となる場合の対処法 – Qiita
  • 最初こちらの記事がヒットしましたが2018年で今となっては古く、かつ紹介されている babel-eslint も deprecated になって代わりに @babel/eslint-parser と npm のページに記載されていたため、参考にするのは止めました
    • function-no-unknown reported in SCSS · Issue #26 · ota-meshi\/stylelint-config-recommended-vue · GitHub
      • この issues は比較的最近 (2022/2) ですが、最初の記事で解決できたので同じく解決策として最終的には不採用