webpackにESLintを導入する

webpack4.xがインストール済みのところにESLint v6.6.0を導入して使えるようにするまで。

ESLintインストール

package.jsonがあるディレクトリで以下を実行。

yarn add --dev eslint eslint-loader

続いて初期化。コマンドラインでいくつかの質問に答えると、それに応じた内容の.eslintrc.jsが作られます。

eslint --init

もし、eslintがない！？ということになったら、./node_modules/.bin/とかにあるのではないかと思いますので、確認してみてください。その場合は、./node_modules/.bin/eslint --initです。

webpack.config.jsに追記

module:のブロックが追記部分です。

module.exports = {
  mode: 'development',
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  module: {
    rules: [
      // For *.js
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'eslint-loader'
          }
        ]
      }
    ]
  }
}

これで使えるようになります。

おまけ

外部のライブラリを使っている場合などで、ESLintの対象としたくない場合、webpack.config.jsのexclude:に指定します。もとから/node_modules/が記載されていると思います。追加する場合は配列にすることで複数指定できます。

exclude: [/node_modules/, /^\/usr\/local\/lib/],

フルパスに対してのパターンマッチなので、～/lib/にあるものは除外したい場合は、以下のように指定することができます。

exclude: [/node_modules/, /.+\/lib\//],

参考文献

• ESLintの導入手順まとめ