Why does ESLint not recognize my class arrow functions?

Question

I followed the advice on How do I configure ESLint to allow fat arrow class methods which states to set the parser to babel-eslint.

I installed it and updated my config file as follows:

{
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error",
    "indent": ["error", 2],
    "eqeqeq": ["error", "always"],
    "max-depth": ["error", 5],
    "space-before-function-paren": ["error", "never"],
    "template-curly-spacing": ["error", "always"],
    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
    "curly": "error",
    "brace-style": ["error", "1tbs"],
    "space-before-blocks": "error"
  }
}

However it is still breaking eslint, giving a parsing error as follows:

class Person {
  constructor() {
    console.log(this);
    this.hello1();
    this.hello2();
  }

  // breaks eslint, but WHY?

  hello1 = () => {
    console.log(this);
  }
  
  hello2() {
    console.log(this);
  }

}
const P1 = new Person();

It is highlighting the first = and saying:

Parsing Error unexpected token =

How can I troubleshoot this further? ESLint is correctly applying all the rules in this file, but seems to ignore the parser options.

Or something else?

I'm not sure if this is relevant here:

https://github.com/babel/babel-eslint#note-babel-eslint-is-now-babeleslint-parser-and-has-moved-into-the-babel-monorepo

but I don't really know what that means.

Answer 1

I think you are getting that linting error because you are not using ECMA version 2022 (aka ECMA latest). Please check this link at shorturl.at/nsAS5 that shows no lint errors on the fat arrow class method because ECMA version is at latest 2022. When you change ECMA version to 2021 or lower, you get the Parsing Error unexpected token = error.

Also, I notice some things about your eslintrc.json:

1. I think it might be because babel-eslint is deprecated? https://www.npmjs.com/package/babel-eslint. Maybe you should try @babel/eslint-parser? https://www.npmjs.com/package/@babel/eslint-parser

2. your config looks a bit off. you should place parser key outside of parserOptions key like so:

  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },

see https://eslint.org/docs/user-guide/configuring/language-options

also, I just want to point out that eslint by default uses espree as its parser, but you can use esprima or @babel/eslint-parser (or @typescript-eslint/parser if you're using typescript) see https://eslint.org/docs/user-guide/configuring/plugins