ESLint - 使用VSCode时的可选链错误

Question

当我使用可选链时，我看到一个红色下划线，但是由于我在node 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": {
    },
}

- A. L

---

如果您将光标放在错误上方，会得到什么错误信息？ - Buddy Christ

@peprumo 解析错误：意外的标记。 添加了图片。 - A. L

Answer 1

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

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

npm

npm install --save-dev eslint@^7.5

yarn

yarn add -D eslint@^7.5

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

.eslintrc

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

.eslint.js

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

点击此处https://eslint.org/blog/2020/07/eslint-v7.5.0-released#optional-chaining-support了解更多信息。

- steadweb

---

这是截至2020年最准确、最新的答案。 - Chris

Answer 2

你应该在eslint配置中使用@babel/eslint-parser（之前称为babel-eslint）。这样可以使用eslint检查所有有效的Babel代码。自版本v7.2.0起，eslint支持所有ES2020功能。

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

然后在你的.eslintrc中做如下设置：

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

- Dan Starns

---

可选链是否在普通的eslint中包含？ - A. L

我不知道 @A.Lau。 - Dan Starns

很遗憾，还没有。 有一个支持es2020语法特性的草案，其中之一是可选链。 您可以在此处阅读：https://github.com/eslint/eslint/pull/13196 - Tzahi Leh

那个解析器的键应该放在哪里？是放在“eslintConfig”下的“package.json”文件中吗？ - bot19

@bot19 试着将它放在 eslintrc 配置的根目录 这里，它在 .eslintrc.js 中。 - Dan Starns

正如@steadweb的回答所说，eslint@^7.5现在支持可选链，无需使用@babel/eslint-parser。 - Denis Howe

Answer 3

Node.js 12及以上版本支持可选链运算符（一个ECMAScript 2020特性）。尝试使用：

"parserOptions": {
    "ecmaVersion": 2020
}

- Zelinskyi Bohdan

Answer 4

首先，您需要安装支持可选链的 ESLint 解析器：

``` npm install -D @babel/eslint-parser ```

如果您遇到同伴依赖问题，请在命令后面添加 `--legacy-peer-deps`。

接下来，您需要安装支持可选链的 ESLint 版本。这个版本是 7.5.0，可以在这里找到:

``` npm install eslint@^7.5 ```

告诉您的 ESLint 服务器使用上述安装的解析器：

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

- Kiran JD

Answer 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",
}

- Robin Wieruch

Answer 6

如果您正在使用 babel-eslint（自2021年起已被弃用），请将其升级为 @babel/eslint-parser 并确保您的 eslint 版本为7或更高版本。

在 .eslintrc.json 中，您需要以下配置：

    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "requireConfigFile": false,
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ],
        "babelOptions": {
            "parserOpts": {
                "plugins": [ "jsx" ]
            }
        }
    },
    "plugins": [
        "prettier",
        "react-hooks"
    ],

"requireConfigFile": false, - 如果您没有eslint配置文件

"plugins": [ "jsx" ] - 如果您使用jsx

"plugins": [ "typescript" ] - 如果您使用typescript

"plugins": [ "flow" ] - 如果您使用flow

- AlexMelw