Eslint fails to parse and red-highlights optional chaining (?.) and nullish coalescing (??) operators

Question

I am looking for the relevant eslint rules for

• @babel/plugin-proposal-optional-chaining
• @babel/plugin-proposal-nullish-coalescing-operator

My editor highlights in red when I do the following

const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined
const foo = obj.baz ?? 'default'; // default
// eslint-disable-next-line no-console
console.log('baz', baz);
// eslint-disable-next-line no-console
console.log('safe', safe);
// eslint-disable-next-line no-console
console.log('foo', foo);

The code works properly, but eslint highlights my code in red.

Reference:

• https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining
• https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator

Answer 1

Nullish coalescing operator is natively supported starting from eslint>=7.5.0.

The easiest is set ES2020 in your package.json:

{
  "eslintConfig":
  {
    "parserOptions":
    {
      "ecmaVersion": 2020
    }
  }
}

Answer 2

add the following config to your eslint:

"parser": "babel-eslint"

Answer 3

Have you tried setting the parser on your eslint config to "babel-eslint"? https://www.npmjs.com/package/babel-eslint It's the recommended parser when using experimental features not supported in eslint yet.