eslint - vscode 的可选链接错误

Question

I am seeing aa red underline when I'm using an optional chain, but the code runs fine as I am on node 14

Here's my setup:

node 14.1.0
eslint "^6.8.0"

.eslintrc.js

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

Answer 1

You no longer need @babel/eslint-parser as eslint@^7.5 now supports optional chanining.

Run the following to update eslint within your project:

npm

npm install --save-dev eslint@^7.5

yarn

yarn add -D eslint@^7.5

And then, ensure your config is as follows:

.eslintrc

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

.eslint.js

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

See https://eslint.org/blog/2020/07/eslint-v7.5.0-released#optional-chaining-support for more information.

Answer 2

You should use @babel/eslint-parser (formerly called babel-eslint ) with your eslint config. This allows you to lint ALL valid Babel code with eslint. 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

Then in your .eslintrc do:

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

Answer 3

First, you should have a ESLint parser that supports the optional chaining:

npm install -D @babel/eslint-parser

If you're facing issues with peer dependencies then run by appending --legacy-peer-deps to the command.

Then, you should have the ESLint version that supports the optional chaining. This is that release version(7.5.0):

npm install eslint@^7.5

Tell your ESLint server to use the above-installed parser:

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

Answer 4

Not all JavaScript features enabled by Babel are included in ESLint.

You can use babel-eslint though:

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

Then in your .eslintrc do:

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

Answer 5

All versions of Node.js above 12 support the optional-chaining operator (a ECMAScript 2020 feature). Try to use this:

"parserOptions": {
    "ecmaVersion": 2020
}