How do I configure ESLint to allow fat arrow class methods

First install these plugins:

npm i -D babel-eslint eslint-plugin-babel

Then add these settings to your ESLint config file:

{
    "plugins": [ "babel" ],
    "parser": "babel-eslint",
    "rules": {
        "no-invalid-this": 0,
        "babel/no-invalid-this": 1,
    }
}

This way you can use fat arrow class methods plus you will not get any no-invalid-this errors from ESLint.

First install babel-eslint:

npm i -D babel-eslint

Then add the following to your .eslintrc.json file:

"parser": "babel-eslint"

If you want to use experimental features (such as arrows as class methods) you need to use babel-eslint as a parser. Default parser (Espree) doesn't support experimental features.

From what I read in the error message Parsing error: Unexpected token = it looks like more a parser error than linter one.

Assuming you are using Babel as your JavaScript compiler/transpiler and babel-eslint as your ESLint parser, chances are that it is Babel complaining about the syntax, not ESLint.

The issue is not about the arrow functions but something more experimental (ES7??) that I think it is called property initializer or class instance field (or both :) ).

If you want to use this new syntax/feature you need to enable preset-stage-1 in Babel. This preset includes the syntax-class-properties plugin that allows that syntax.

Summing up:

1. Install babel preset:

   npm install babel-preset-stage-1
   

2. Add this preset to the list of your presets (I suppose you are already using es2015 and react presets), either in your .babelrc or in your babel-loader query field if you are using webpack.

   "presets": ["es2015", "stage-1", "react"]