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

Answer 1

add the following config to your eslint:

"parser": "babel-eslint"

Answer 2

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 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.

Answer 4

You have to use this plugin: https://github.com/babel/eslint-plugin-babel

You can then disable the original eslint-rule and enable the babel version of it, which will then show no false errors. Your eslint-config could then look like this:

{
  parser: "babel-eslint",
  rules: {
    "no-unused-expressions": 0,
    "babel/no-unused-expressions": 1
  },
  plugins: ["babel"]
}