【ESLint】エラー 「Parsing error: sourceType 'module' is not supported when ecmaVersion < 2015. Consider adding `{ ecmaVersion: 2015 }` to the parser options」

はじめに

git commitしようとすると、タイトルのエラーとなったのでその対処。

結論

.eslintrcに"ecmaVersion": 2015の１行を追加。

↓例

{
  "parser": "babel-eslint",
  "plugins": ["react"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "ecmaVersion": 2015 // ←ここ
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
    "react/jsx-uses-react": 2,
    "react/jsx-uses-vars": 2,
    "react/react-in-jsx-scope": 2,
    "no-console": 0
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

詳細

• ESLintでは、サポートしたいJavaScriptの言語オプションを指定することができる。
• デフォルトでは、ECMAScript 5。
• このオプションは .eslintrc.* ファイルのparserOptions プロパティで設定でき、利用可能なオプションは以下の通りになります。
  • ecmaVersion: 2019,2020等年ベースの命名法を使用することが可能です。また、"latest "を設定すると、最近サポートされたバージョンを使用することができる。
  • sourceType: コードがECMAScriptモジュールである場合は、「script」（デフォルト）または「module」に設定されます。
  • allowReserved: 識別子として予約語の使用を許可する。
  • ecmaFeatures: JSXを有効にするなど、どの追加言語機能を使いたいかを示すオブジェクトです。

設定例↓

{
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}

おわりに

eslintの設定内容はこれまであまり詳しく見てこなかったので、エラーがでたことで詳しく確認するいい機会となりました。