,

[webpack] webpack 2 入門: eslint-loader で ESLint する

公開日: 2017/06/02
更新日: 2018/10/04

JavaScript を ESLint でチェックします。

Contents

Installation

ESLint と eslint-loader をインストールします。

% yarn add --dev eslint-loader eslint

.eslintrc

ESLint の設定は .eslintrc ファイルに書くことにします。

% yarn add --dev eslint-config-google
.eslintrc
{
  "extends": "google",
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true
  },
  "parserOptions": {
    "sourceType": "module"
  }
}

webpack.config.js

処理の順番を考慮する必要があります。
babel-loader の後に eslint-loader を追加します。

webpack.config.js
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          { loader: 'babel-loader' },
          { loader: 'eslint-loader' }
        ]
      }
    ]
  }

options

autofix と error 時のビルド中止をするオプションを設定します。

webpack.config.js
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: 'eslint-loader',
            options: {
              fix: true,
              failOnError: true
            }
          }
        ]
      }
    ]
  }

webpack で実行します。

% $(yarn bin)/webpack
Hash: 6c323710c3b41b50f5ab
Version: webpack 2.6.1
Time: 2875ms
     Asset     Size  Chunks                    Chunk Names
vendors.js   792 kB       0  [emitted]  [big]  vendors
    app.js  5.74 kB       1  [emitted]         app
  [85] (webpack)/buildin/global.js 509 bytes {0} [built]
 [114] ./app/console.js 46 bytes {1} [built]
 [115] ./app/index.js 2.36 kB {1} [built]
 [116] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [117] ./~/lodash/lodash.js 540 kB {0} [built]
 [118] ./app/lib/person.js 356 bytes {1} [built]
 [119] ./app/vendors.js 221 bytes {0} [built]
 [120] ./~/core-js/fn/regexp/escape.js 107 bytes {0} [built]
 [290] ./~/core-js/modules/es7.string.pad-end.js 337 bytes {0} [built]
 [291] ./~/core-js/modules/es7.string.pad-start.js 340 bytes {0} [built]
 [292] ./~/core-js/modules/es7.string.trim-left.js 215 bytes {0} [built]
 [300] ./~/core-js/shim.js 7.38 kB {0} [built]
 [301] ./~/regenerator-runtime/runtime.js 24.4 kB {0} [built]
 [302] (webpack)/buildin/module.js 517 bytes {0} [built]
 [303] multi ./app/index.js ./app/console.js 40 bytes {1} [built]
    + 289 hidden modules

補遺