[JavaScript]WebpackにESLintを設定する

ESLintを設定してある前提です。Webpackでbundleする際に、ESLintを実行する方法です。
ESLint自体の設定は下記記事を参考にしてください。Nuxt.jsでの設置ですが、変わらず動作します。
[NUXT.JS]ESLint and Prettierの設定の方法

eslint-loaderのインストール

npmからeslint-loaderをインストールします。

npm install eslint-loader --save-dev

eslint-loaderをconfigに設定する

基本的には下記の通りになります。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // eslint options (if necessary)
        },
      },
    ],
  },
  // ...
};

ただ、webpackの場合、ESLintのみloaderとして設定することは少ないと思います。
その場合はuseを使用します。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              // option
            }
          },
          {
            loader: 'eslint-loader',
            option: {
              // option
            }
          }
        ]
      },
    ],
  },
  // ...
};

上記はbabelと併用した場合です。
併用した場合、記載する順序が重要になります。上記のように記載した場合は、eslintからloaderが読み込まれます。
とはいえ、より厳密にbabel-loaderよりも先にeslint-loaderを実行したい場合は、下記の通りになります。

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  // ...
};

enforce: 'pre'をつけることで確実に先に実行することができます。

オプションについて

オプションについての簡単なまとめです。詳細はeslint-loaderのページをご確認ください。
webpack eslint-loader

cache: type：boolean (default: false)
キャッシュを利用することで、lintingに要する時間を短縮できます。
eslintPath: type：String (default: eslint)
eslintのディレクトリパスを指定します。
fix: type：boolean (default: false)
フォーマッターを使用して、自動的にコーディングルールにあわない記述を修正します。
formatter: type：String | function (default: stylish)
使用するformatterを設定します。
emitError: type：boolean (default: false)
常にエラーを返します。
emitWarning: type：boolean (default: false)
常に警告を返します。
failOnError: type：boolean (default: false)
エラーが発生した場合、webpackのビルドを失敗させます。
failOnWarning: type：boolean (default: false)
警告が発生した場合、webpackのビルドを失敗させます。
quiet: type：boolean (default: false)
エラーのみ表示し、警告は無視します。
outputReport: type：boolean | object (default: false)
エラーのみ表示し、警告は無視します。

outputPathを例に記述方法を記載します。outputPathはさらにfilepathとformatterが指定できます。

module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          outputReport: {
            filePath: 'checkstyle.xml',
            formatter: 'checkstyle',
          },
        },
      },
    ],
  },
};

JavaScriptおすすめの書籍

JavaScriptはonlineの情報も多く、Google検索が便利なので書籍を読む必要はないかもしれません。
ただ、これから学ぶ方は一冊簡単な本を読んだ方が理解が深まると思います。逆引き本とかも良書はあるのですが、Google検索した方がコピー＆ペーストできるので便利なのでいらないかな。

確かな力が身につくJavaScript「超」入門第2版
これからはじめる方向け

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
超おすすめ！Google検索では出てこないJavaScriptが学べます。これを読み終えた時、一段自分のコーディング力が上がったと思いました。

#webpack