CODEWITHSUNDEEP
javascripteslintclass-fields
CodeOcelot
CodeOcelot

Reputation: 3513

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

Upvotes: 78

Views: 35982

Answers (7)

webpreneur
webpreneur

Reputation: 915

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.

Upvotes: 9

Matt
Matt

Reputation: 6330

2021 Update: Be sure you're using @babel/eslint-parser and not the deprecated babel-eslint

  1. Remove the old package if necessary: yarn remove babel-eslint or npm uninstall babel-eslint
  2. yarn add --dev @babel/eslint-parser or npm install --save-dev @babel/eslint-parser
  3. In .eslintrc add "parser": "@babel/eslint-parser"

Optionally, this answer suggests including "requireConfigFile": false in .eslintrc to prevent eslint from searching for unnecessary config files:

{
  ...
  "parserOptions": {
    ...
    "requireConfigFile": false,
  }
}

If this still doesn't work, try checking whether your system is using a globally installed eslint (and removing it).

My other problem was eslint was using a globally installed version instead of my local version, and the global eslint can't access my locally installed babel-eslint parser. Further, since my globally installed eslint was installed on a different version of node, removing it was non-trivial.

Checking if your system is using global versus local eslint.

  1. Install babel-eslint following @spencer.sm's answer for your local eslint.
  2. From the terminal, check if you get different output from running eslint . and npx eslint .. If you get different output it's likely that it's your global eslint running that can't access babel-eslint.

Uninstalling the global eslint

For most people, the following commands should uninstall eslint with npm (uninstall global package with npm) and yarn (uninstall global package with yarn):

# npm
npm uninstall -g eslint
npm uninstall eslint

# yarn
yarn global remove eslint

Next, run npx eslint . to see if things work. If it doesn't, which it didn't for me, you need to take an extra step to remove the globally installed eslint.

From this answer, I learned that I had installed eslint on a system version of Node instead of my current version of Node (I use nvm). Follow these simple steps to remove the global eslint and you should be good to go!

Upvotes: 3

spencer.sm
spencer.sm

Reputation: 20564

First install babel-eslint:

npm i -D babel-eslint

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

"parser": "babel-eslint"

Upvotes: 34

Alex Gu
Alex Gu

Reputation: 51

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

Upvotes: 5

dreyescat
dreyescat

Reputation: 13818

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

Upvotes: 8

Ilya Volodin
Ilya Volodin

Reputation: 11256

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.

Upvotes: 51

Scott Weinstein
Scott Weinstein

Reputation: 19117

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

Upvotes: -6

Related Questions