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.

Answer 2

In 2021 it seems that babel-eslint has been deprecated in favour of @babel/eslint-parser, according to the GitHub repo:

NOTE: babel-eslint is now @babel/eslint-parser and has moved into the Babel monorepo.

So to update the instructions from the other answers, you need to:

npm i eslint @babel/eslint-parser --save-dev

Then make sure you configure the parser key in .eslintrc:

{
  "parser": "@babel/eslint-parser",
  ...
}

As an aside, as the OP doesn't mention the runtime, I'm running in Node 12 so I don't need babel to transpile my code but ESlint does need babel to lint the code (sounds weird but that's my understanding). So I also needed a basic babel config, babel.config.json:

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "node": "12"
        }
      }
    ]
  ]
}

Answer 3

I had a very similar problem. The accepted answer is correct, as far as it goes, and very helpful. But I use a json version of the eslint config, not a javascript one, so once babel-eslint was installed using:

npm i eslint babel-eslint --save-dev

I had to change my json config. It looks like this now:

.eslintrc.json

{
  "parserOptions": {
    "es6": true,
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "parser": "babel-eslint",
  "rules": {
    "no-unused-vars": 0
  },
  "env": {
    "browser": true,
    "node": true
  }
}