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

【问题标题】：Eslint fails to parse and red-highlights optional chaining (?.) and nullish coalescing (??) operatorsEslint 无法解析和红色突出显示可选链接 (?.) 和无效合并 (??) 运算符
【发布时间】：2019-12-14 03:31:44
【问题描述】：

我正在寻找相关的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 用红色高亮了我的代码。

参考：

【问题讨论】：

标签： javascript babeljs eslint

【解决方案1】：

从eslint>=7.5.0 开始原生支持空值合并运算符。

最简单的就是在你的package.json中设置ES2020：

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

【讨论】：

您的意思可能是ecmaVersion，而不是exmaVersion？
谢谢@JürgLehni，我已经更正了那个错字。 orz
看起来规范是 ecmaVersion: 11 或 12，而 2020 和 2021 实际上被接受为别名：eslint.org/docs/user-guide/configuring/language-options
我在.eslintrc.json 找到了“parserOptions”并解决了这个问题

【解决方案2】：

将以下配置添加到您的eslint：

"parser": "babel-eslint"

【讨论】：

更多上下文：创建 .eslintrc.json 添加 {"parser": "babel-eslint"} 保存

【解决方案3】：

您是否尝试过将 eslint 配置中的解析器设置为“babel-eslint”？ https://www.npmjs.com/package/babel-eslint 在使用 eslint 尚不支持的实验性功能时，推荐使用它。

【讨论】：

当我从 @typescript-eslint/parser 更改时，这会引发大量的打字稿错误

【解决方案4】：

你必须使用这个插件：https://github.com/babel/eslint-plugin-babel

然后您可以禁用原始的 eslint-rule 并启用它的 babel 版本，这样就不会显示任何错误错误。您的 eslint-config 可能如下所示：

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

【讨论】：