How do I configure ESLint to allow fat arrow class methods

javascript reactjs ecmascript-6 eslint
CodeOcelot picture CodeOcelot · Dec 12, 2015 · Viewed 28.2k times · Source

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

Ilya Volodin picture Ilya Volodin · Dec 13, 2015

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.

Related questions

Expected 'this' to be used by class method

In my class, eslint is complaining "Expected 'this' to be used by class method 'getUrlParams' Here is my class: class PostSearch extends React.Component { constructor(props) { super(props); this.getSearchResults(); } getUrlParams(queryString) { const hashes = queryString.slice(queryString.indexOf('?') + 1).…

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
Adding script tag to React/JSX

I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } …

Read More