How do I configure ESLint to allow fat arrow class methods

Question

ESLint is throwing a Parsing error: Unexpected token = error when I try to lint my Es6 classes. What configuration parameter am I missing to enable fat arrow class methods in eslint?

Sample class:

class App extends React.Component{
    ...
    handleClick = (evt) => {
        ...
    }
}

.eslint

{
  "ecmaFeatures": {
    "jsx": true,
    "modules":true,
    "arrowFunctions":true,
    "classes":true,
    "spread":true,

  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "strict": 0,
    "no-underscore-dangle": 0,
    "quotes": [
      2,
      "single"
    ],
  }
}

Answer 1

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.

Answer 2

First install babel-eslint:

npm i -D babel-eslint

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

"parser": "babel-eslint"

Answer 3

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.