eslint - vscode 的可选链接错误答案

【问题标题】：eslint - Optional chaining error with vscodeeslint - vscode 的可选链接错误
【发布时间】：2020-08-21 01:07:18
【问题描述】：

当我使用可选链时，我看到一条红色下划线，但代码运行良好，因为我在节点 14 上

这是我的设置：

node 14.1.0
eslint "^6.8.0"

.eslintrc.js

module.exports = {
    "env": {
        "node": true
    },
    "extends": [
        "eslint:recommended",
    ],
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2020
    },
    "rules": {
    },
}

【问题讨论】：

如果您将光标放在错误上，您会收到什么错误消息？
@peprumo Parsing Error: Unexpected token . 添加图片

标签： javascript node.js visual-studio-code eslint

【解决方案1】：

您不再需要 @babel/eslint-parser，因为 eslint@^7.5 现在支持可选链接。

运行以下命令来更新项目中的 eslint：

npm

npm install --save-dev eslint@^7.5

纱线

yarn add -D eslint@^7.5

然后，确保您的配置如下：

.eslintrc

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

.eslint.js

module.exports = {
    "parserOptions": {
        "ecmaVersion": 2020
    }
}

【讨论】：

这是截至 2020 年最新的正确答案

【解决方案2】：

您应该在您的 eslint 配置中使用 @babel/eslint-parser（以前称为 babel-eslint）。这允许您使用 eslint 对所有有效的 Babel 代码进行 lint。 eslint supports all ES2020 features as of version v7.2.0

$ npm install @babel/eslint-parser --save-dev
# or
$ yarn add @babel/eslint-parser -D

然后在你的.eslintrc 做：

{
  parser: "@babel/eslint-parser",
}

【讨论】：

普通 eslint 中不包含可选链吗？
@A.Lau 我不知道
不幸的是，还没有。有一个关于支持一些 es2020 语法特性的草案，可选链就是其中之一。你可以在这里阅读：github.com/eslint/eslint/pull/13196
解析器密钥去哪儿了？ package.json 在“eslintConfig”下？
@bot19 尝试将其放在 eslintrc 配置的根目录 here 中 .eslintrc.js

【解决方案3】：

首先，你应该有一个支持可选链的 ESLint 解析器：

npm install -D @babel/eslint-parser

如果您遇到对等依赖项的问题，请通过将 --legacy-peer-deps 附加到命令来运行。

然后，您应该拥有支持可选链接的 ESLint 版本。 This是那个发布版本（7.5.0）：

npm install eslint@^7.5

告诉你的 ESLint 服务器使用上面安装的解析器：

{
  "parserOptions": {
    "ecmaVersion": 2020
  }
  ...
}

【讨论】：

【解决方案4】：

12 以上的所有 Node.js 版本都支持可选链运算符（ECMAScript 2020 的一项功能）。尝试使用这个：

"parserOptions": {
    "ecmaVersion": 2020
}

【讨论】：

【解决方案5】：

并非所有 Babel 启用的 JavaScript 功能都包含在 ESLint 中。

您可以使用babel-eslint：

$ npm install @babel/eslint-parser --save-dev
# or
$ yarn add @babel/eslint-parser -D

然后在你的.eslintrc 做：

{
  parser: "@babel/eslint-parser",
}

【讨论】：