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

Your configuration file is not correct:

This line here:

"parser": "babel-eslint",

is doing nothing. Unfortunately it will not throw an error and continue to use the default parser.

Once you do this you can begin to use the babel parser if the rest of the dependencies are correctly installed.