2016-08-04 44 views
10

Ich versuche, Linting mit Airbnb's Javascript-Standards auf meinem React-Projekt einzurichten, es verwendet Webpack.Einrichten von Airbnb ESLint mit React und Webpack

Aktualisiert mit den neuesten Paketen basierend auf Kommentaren.

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

Ich habe auch eine preloader Setup in meinem webpack Config

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

und die folgenden für die Ausführung des Skripts einrichten

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

ich auch eine .eslintrc-Datei, die Folgendes

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

Das gibt mir die folgende Fehlermeldung:

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

Wenn ich die .eslintrc Datei entfernen, die ich in Konflikt dachte vielleicht, bekomme ich folgende Fehlermeldung:

error Parsing error: The keyword 'const' is reserved 

durch einen npm Fehler an, der die Aufgabe verursacht beenden.

Jede Hilfe wäre willkommen!

+0

Haben Sie es mit Eslint 3 versucht? Es gab gewisse Änderungen in letzter Zeit und aufgrund des Fehlers, warum es bricht. Wenn Sie eslint 3 aus irgendeinem Grund noch nicht verwenden können, müssen Sie eine ältere Version des Presets verwenden, die damit kompatibel ist. –

+0

Ich habe tatsächlich eslint 3.9.5 installieren @ JuhoVepsäläinen ist das eine späte genug Version? – Ash

+1

Es wird "eslint": "^ 2.13.1", auch wenn Sie das global installiert haben. –

Antwort

8

So hatte ich das gleiche Problem, aber ich fixiert diesen Fehler letzte Version der aktuellen Pakete mit:

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

Und bitte, tun Sie dieses 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

Datei
{ 
     "extends": "airbnb" 
    } 
+0

Genau das musste ich tun, ich musste alle Pakete entfernen und neu installieren, denn es gab einige verrückte Konflikte! – Ash

+3

Ich bin mir nicht sicher über das Entfernen der globalen Eslint oder Neuinstallation ... Ich habe das getan. Es brauchte Atom, um Atom neu zu starten. – Devin