Setting up Airbnb ESLint with React and Webpack

Question

I am trying to set up linting with Airbnb's Javascript standards on my React project, it uses webpack.

Updated with latest packages based on comments.

"babel-eslint": "^6.1.2",
"eslint": "^3.2.2",
"eslint-config-airbnb": "^10.0.0",
"eslint-plugin-import": "^1.12.0",
"eslint-plugin-jsx-a11y": "^2.0.1",
"eslint-plugin-react": "^6.0.0",
"jshint": "^2.9.2",
"jshint-loader": "^0.8.3",
"json-loader": "^0.5.4",

I also have a preloader setup in my webpack config

preLoaders: [
    {
        test: /\.jsx?$/,
        loaders: ['eslint'],
        // define an include so we check just the files we need
        include: PATHS.app
    }
],

And the following set up for running the script

  "lint": "eslint . --ext .js --ext .jsx --ignore-path .gitignore --cache",

I also have a .eslintrc file which has the following

{
  "extends": "airbnb",
   "env": {
      "node": true,
      "es6": true
   }
 }

This gives me the following error:

Configuration for rule "react/jsx-sort-props" is invalid:
Value "data["0"].shorthandLast" has additional properties.

If i remove the .eslintrc file which i thought might be conflicting, I get the following error:

 error  Parsing error: The keyword 'const' is reserved

Followed by a npm error which causes the task to exit.

Anthracene

Have you tried it with eslint 3? There were certain recent changes and based on the error that's why it breaks. If you can't use eslint 3 yet for a reason or another, then you have to use an older version of the preset that's compatible with it. – Hallam

I actually have eslint 3.9.5 install @JuhoVepsäläinen is that a late enough version? – Anthracene

It will pick up "eslint": "^2.13.1", even if you have that installed globally. – Hallam

I updated my package.json to 3.9.5 and it made no difference – Anthracene

So now i properly fixed my version of eslint to ^3.2.2 but still the same problem. – Anthracene

Make sure eslint-plugin-react is up to date too. They released 6.0.0 just a while ago and that might fix your issue given that's where the error stems from. – Hallam

Yeap i updated all the packages to the latest (removed everything and also re-installed) Still no luck. Will update question with the latest deets – Anthracene

I have a working setup here. The biggest difference seems to be that I'm using a different parser. Hard to say anything beyond that. Maybe you could try ESLint gitter for ideas. – Hallam

Looks like you haven;t added the eslintrc file to config options in webpack eslint: {configFile: '.eslintrc'} could you try after adding it – Thomajan

I have the same issue with all updated packages, any ideas what else can I do to fix it? – Agone

@skymk i ended up having to remove all my node modules and reinstall. Once I did that I had no problems. – Anthracene

Answer 1

So, I had the same issue, but I fixed this error using last version of current packages:

"eslint": "3.2.2",
"eslint-config-airbnb": "10.0.0",
"eslint-loader": "1.5.0",
"eslint-plugin-import": "1.12.0",
"eslint-plugin-jsx-a11y": "2.0.1",
"eslint-plugin-mocha": "2.2.0",
"eslint-plugin-react": "6.0.0",

And please, do this tutorial: React Code Style with ESLint + Babel + Webpack

module: { 
    preLoaders: [
      {
        test: /\.jsx?$/,
        loaders: ['eslint-loader'],
        include: path.join(__dirname, 'src'),
        exclude: path.join(__dirname, 'src/app/container')
      }
    ],
...
    eslint: {
      configFile: './.eslintrc',  //your .eslintrc file 
      emitWarning: true
    }

.eslintrc file

    {
      "extends": "airbnb"
    }

Elspeth

This is exactly what I had to do, I had to remove all the packages and re-install too as there were some whacky conflicts! – Anthracene

I'm not sure about removing the global eslint or reinstalling… I did that. It actually took restarting Atom for this to go away. – Shady