How do I configure ESLint to allow fat arrow class methods

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

Answer by Scott Weinstein for How do I configure ESLint to allow fat arrow class methods

Your sample isn't valid ES6, so there's no way to configure eslint to allow it

Answer by yonatanmn for How do I configure ESLint to allow fat arrow class methods

handleClick is a method of the Class, so no = needed :

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

if it's static you can do :

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

and for binding read this or use auto-bind decorator

Answer by Ilya Volodin for How do I configure ESLint to allow fat arrow class methods

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 by dreyescat for How do I configure ESLint to allow fat arrow class methods

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

Answer by Alex Gu for How do I configure ESLint to allow fat arrow class methods

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72