Issue with eslint-config-airbnb-base and `optional chaining` operator

[kayomarz]

Issue with eslint-config-airbnb-base and optional chaining operator ?. (JavaScript)

// .eslintrc.js
module.exports = {
  env: { es2021: true },
  extends: [ 'airbnb-base' ]
};

const o = {};
const a = o?.a;

For the above code, ESLint reports Parsing error: Unexpected token at the optional chaining operator ?.

ESLint rules for optional chaining should work with parserOption: {ecmaVersion: 2020} or higher and which eslint automatically sets because env: {es2021: true} is used in the config above.

However when airbnb-base is used, an explicit parserOption: ecmaVersion: 12 seems to be required to resolve the above issue as such:

// .eslintrc.js
module.exports = {
  env: { es2021: true },
  extends: [ 'airbnb-base' ],
  parserOptions: { ecmaVersion: 12 }
};

(Note: ecmaVersion: 11 should also work)

The error does not occur without airbnb-base as below:

// .eslintrc.js
module.exports = {
  env: { es2021: true }
};

Although the fix is simply to explicitly state ecmaVersion it can take a while to figure out that the Parsing error: Unexpected token is because of airbnb-base.

When this issue occors, all other lint errors in the file are not reported which means eslint stops working!

For a better developer experience, this issue could be looked into or documented well.

The above issue occurred with:

Local ESLint version: ^8.7.0
Global ESLint version: ^8.7.0
Node version: v14.17.3
npm version: 6.14.13
Operating System: Linux

[ljharb]

Does babel-preset-airbnb transform that yet? If so, then https://github.com/airbnb/javascript/blob/b4377fb03089dd7f08955242695860d47f9caab4/packages/eslint-config-airbnb-base/index.js#L13 can be updated.

[Vivek-04022001]

Hello, I'm wondering if it's possible for people who are not part of the project to contribute. If the answer is yes, could you please provide guidance on how to do so?

[ljharb]

@Vivek-04022001 yes, just look for issues that have a "pull request wanted" label.

[Vivek-04022001]

okay thanks

[branzdev]

Hello,

I'm having the same issue with eslint-config-airbnb.

Also, when using the option:

• "env": { "shared-node-browser": true}

It does not recognize browser global variables like document.

This issue does not happen if I remove airbnb from my extends configuration.

[ljharb]

@branzdev we don't set that env value so i'm not sure why that would affect it. what's your eslint config?

[martijnhjk]

I am also having to add parserOptions: { ecmaVersion: 12 }, any developments on this topic?

[ljharb]

@martijnhjk thats expected pending https://github.com/airbnb/javascript/issues/2541#issuecomment-1014722030

[martijnhjk]

@ljharb I am not sure I understand. That comment was made over a year and a half ago. Will the ecmaVersion be updated in the config? Or is overriding parserOptions the final recommended practice?

[ljharb]

Time doesn’t change whether it’s correct.

Overriding parserOptions is the current only option, and nothing is final.