ecmascript 6 - Eslint - `Parsing error: unexpected token =` error for assigned fat arrow / property initializer

Question

I'm using an arrow function and it's complaining about a parsing error:

Parsing Error: Unexpected token =

However my code is valid (please tell me if i'm mistaken). Additionally, i've set the .eslintrc settings to use es6 parsing:

.eslintrc

{
    "parserOptions": {
        "ecmaVersion": 6,
    }
}

Here's my code:

class foo() {
     // Doesn't like the line below
     // even though it is valid:
     namedFunction = () => {

     }

}

There a way to resolve this error? This makes a huge different in terms of what the value of this from a particular function.

Answer 1

You're using class field (a.k.a. property initializer) syntax, which is not part of ECMAScript 2015 (ES6), nor ES2016 or 2017, and so unsupported by ESLint. It's currently a Stage 3 proposal. If you want to use it with ESLint, you'll need to use babel-eslint. That page describes how to use it, but the gist is:

Installation

$ npm install eslint babel-eslint --save-dev
# or
$ yarn add eslint babel-eslint -D

Note: babel-eslint requires babel/core@>=7.2.0 and a valid Babel configuration file to run. If you do not have this already set up, please see the Babel Usage Guide.

Setup

To use babel-eslint, "babel-eslint" must be specified as the parser in your ESLint configuration file (see here for more detailed information).

.eslintrc.js

module.exports = {
  parser: "babel-eslint",
};

With the parser set, your configuration can be configured as described in the Configuring ESLint documentation.