How to get eslint to comply with babel rules?

Question

I have a simple babel config transpiling latest ES code into target which is 12.x but when I try use the latest ES features such as optional chaining, eslint doesn't like it.

My babel config is like so:

{
  "sourceMaps": "inline",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "module-resolver",
      {
        "alias": {
          "^@/(.+)": "./src/\\1"
        }
      }
    ]
  ]
}

and an eslint config like so:

module.exports = {
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:jest/recommended',
    'plugin:jest/style',
    'plugin:cypress/recommended',
    'eslint-config-prettier',
  ],
  env: {
    node: true,
    es6: true,
    jest: true,
    browser: true,
  },
  plugins: ['no-autofix', 'jest', 'cypress'],
  rules: {
    ...
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2019,
    ecmaFeatures: {
      jsx: true,
    },
  }
};

How can I tell eslint that ES version is actually not node v12.x but the 'latest'?

Answer 1

Turns out I needed to update parserOptions.ecmaVersion to be 2021

Answer 2

If you are using ESLint 8 (and you should), in your ESLint config, replace es6: true with es2021: true and remove ecmaVersion: 2019 . According to the documentation this

adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.

If you really want to parse the latest language version rather than ES2021, then in the parserOptions you could set ecmaVersion: "latest" .