javascript - Eslint 无法解析并突出显示可选链接 (?.) 和无效合并 (??) 运算符

Question

我正在寻找相关的 eslint 规则

@babel/plugin-proposal-optional-chaining

@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-nullish-coalescing-operator

Answer 1

从 eslint>=7.5.0 开始，原生支持 Nullish 合并运算符.
最简单的是在你的 package.json 中设置 ES2020:

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