eslint - Optional chaining error with vscode
Javascriptnode.jsVisual Studio-CodeEslintJavascript Problem Overview
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": {
},
}
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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",
}
Solution 3 - Javascript
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
}
...
}
Solution 4 - Javascript
All versions of Node.js above 12 support the optional-chaining operator (a ECMAScript 2020 feature). Try to use this:
"parserOptions": {
"ecmaVersion": 2020
}
Solution 5 - Javascript
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",
}