How do I configure ESLint to allow fat arrow class methods

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"
    ],
  }
}

Solution 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.

Solution 2:

First install babel-eslint:

npm i -D babel-eslint

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

"parser": "babel-eslint"

Solution 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.

Solution 4:

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"]
   

Solution 5:

I came across the same problem today

and @dreyescat 's answer works for me.

By default, babel uses 3 presets: es2015, react, stage-2

Screenshot with "Parsing error: Unexpected token ="

Then if you also select the stage-1preset, the error is gone

Screenshot with no error

You can test it on the bebeljs.io site yourself