Eslint 无法解析并以红色突出显示可选链接 (?.) 和空合并 (??) 运算符

我正在寻找相关的 eslint 规则

• @babel/插件提案可选链
• @babel/plugin-proposal-nullish-coalescing-operator

当我执行以下操作时，我的编辑器会以红色突出显示

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);

代码工作正常，但 eslint 以红色突出显示我的代码。

参考：

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

原生支持空合并运算符eslint>=7.5.0.

最简单的方法是在 package.json 中设置 ES2020：

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