webpackでeslintを使う場合、eslintとは別に、eslint-loaderをインストールする必要があります。
インストール
$ npm i -D webpack $ npm i -D webpack-dev-server $ npm i -D eslint $ npm i -D eslint-loader
そして、webpack、eslintそれぞれの設定ファイルを作成します。
webpackの設定
下記のように、webpack.config.jsを設定します。 moduleのpreLoadersにeslint-loaderの設定を書きます。moduleは、eslint-loader等の-loaderを省略できます。あと、下の方にあるeslintというところで、eslintの設定ファイルを指定します。eslintrc.jsonとか、.eslintrcというファイル名であれば指定は不要かもです。
module.exports = { entry: './src/main.js', output: { path: __dirname + '/www/js', filename: 'bundle.js' }, devServer: { contentBase: __dirname + '/www', port: 8080 }, module: { preLoaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "eslint" } ], loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, { test: /\.css$/, loader: "style!css" } ] }, plugins: [], eslint: { configFile: './.eslintrc' } };
eslintの設定
eslintのルールは沢山あって自分でルールを使うかどうか決められますが、AirBnBのルールが人気だし、そういうところに合わせておいて悪いことはないと思うので、基本AirBnBを使います。ただ、Reactとbabelを使っているときに沢山エラーがでたので、ちょっと修正しました。AirBnBのルールを使いつつ、このエラーは出なくてもいいやと思ったら、ルールを無効にして調整してます。まだ、使いだしたばかりなので、単なる一例です。
.eslintrc
{ "extends": "airbnb", "plugins": [ "react", "jsx-a11y", "import" ], "rules": { "import/no-extraneous-dependencies": 0 }, "env": { "browser": true, "node": true } }
jsx拡張子に関するルール
reactはjsxを使いますが、jsxを使っているファイルの拡張子はjsxにしないと、AirBnBルールに怒られます。jsxを使っていないファイルはjsのままだと思うので、拡張子がjsとjsx共に、webpackがjavascriptに対して実行する処理を適用させるようにしてみます。
該当ファイルの拡張子をjsxに変更し、webpack.config.jsを下記のように修正します。
module.exports = { entry: './src/main.jsx', output: { path: __dirname + '/www/js', filename: 'bundle.js' }, devServer: { contentBase: __dirname + '/www', port: 8080 }, module: { preLoaders: [ { test: /\.jsx{0,1}$/, exclude: /node_modules/, loader: "eslint" } ], loaders: [ { test: /\.jsx{0,1}$/, exclude: /node_modules/, loader: 'babel' }, { test: /\.css$/, loader: "style!css" } ] }, plugins: [] };