eslint - Optional chaining error with vscode

Question

I am seeing a a 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": {
    },
}

if you place the cursor over the error what error message do you get? — Buddy Christ, May 06 '20 at 06:47

steadweb · Accepted Answer · 2023-03-29T09:33:58.723

151

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

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.

edited Mar 29 '23 at 09:33

answered Nov 23 '20 at 18:17

steadweb

15,364
3
33
47

7

This is the correct most up to date answer as of 2020 – Chris Nov 25 '20 at 21:39

score 47 · Answer 2 · edited Jul 30 '21 at 08:53

47

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

edited Jul 30 '21 at 08:53

mikemaccana

110,530
99
389
494

answered May 06 '20 at 07:20

Dan Starns

3,765
1
10
28

3

is optional chaining not included in normal eslint? – A. L May 06 '20 at 08:05
@A.Lau not that I am aware of – Dan Starns May 06 '20 at 08:12
Unfortunately, not yet. There's a draft on supporting some of the es2020 syntax features, optional-chaining is one of them. You can read it here: https://github.com/eslint/eslint/pull/13196 – Tzahi Leh May 21 '20 at 08:30
where does that parser key go? `package.json` under "eslintConfig"? – bot19 Oct 01 '20 at 07:00
3

@bot19 try putting it at the root of eslintrc config [here](https://github.com/babel/babel-eslint#setup) its in `.eslintrc.js` – Dan Starns Oct 01 '20 at 07:02
As @steadweb's answer says, eslint@^7.5 now supports optional chaining without @babel/eslint-parser. – Denis Howe Jan 24 '23 at 17:44

score 12 · Answer 3 · edited Jul 28 '21 at 22:06

12

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

"parserOptions": {
    "ecmaVersion": 2020
}

edited Jul 28 '21 at 22:06

Kelvin Schoofs

8,323
1
12
31

answered Jul 28 '21 at 16:23

Zelinskyi Bohdan

129
1
3

score 7 · Answer 4 · answered Dec 10 '20 at 07:19

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
  }
  ...
}

Robin Wieruch · Answer 5 · 2020-11-19T13:43:37.720

1

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

edited Nov 19 '20 at 13:43

answered Nov 18 '20 at 06:34

Robin Wieruch

14,900
10
82
107

score 0 · Answer 6 · answered Feb 17 '23 at 07:19

Just in case you were using babel-eslint (it's been deprecated sincce 2021), upgrade it to @babel/eslint-parser and make sure you have eslint version 7 or above.

In .eslintrc.json you need the following configuration:

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

"requireConfigFile": false, - if you don't have a eslint config file "plugins": [ "jsx" ] - if you use jsx

"plugins": [ "typescript" ] - if you use typescript

"plugins": [ "flow" ] - if you use flow

eslint - Optional chaining error with vscode

6 Answers6

npm

yarn

.eslintrc

.eslint.js

Linked