Ash Ash - 10 months ago 545
React JSX Question

Setting up Airbnb ESLint with React and Webpack

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

And the following set up for running the script

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

I also have a
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
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.

Any help would be appreciated!


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:

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"