webpack の内部で ESLint をロードさせて JavaScriptのコードをチェックさせるための設定をメモします。

環境

• webpack 1.11.0
• ESLint v1.2.1

手順

Webpackは既に導入済みであることを前提としています。

1. eslint-loader をインストールする

eslint-loader をインストールします。これは、webpack から ESLintを読み込むためのローダーです。

$ npm install --save-dev eslint-loader

2. ESLintの設定ファイルを記述する

プロジェクトのルートディレクトリ直下に .eslintrc ファイルを作成し、例えば以下のような内容を記述しておきます。

{
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "ecmaFeatures": {
        "modules": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "strict": [2, "function"],
        "no-undef": 2,
        "no-console": 0,
        "arrow-parens": [2, "always"]
    }
}

• ESLint v1 では、全てのルールがデフォルトでオフになっているようです。
• 「”extends”: “eslint:recommended”」は バージョン 0.x の時のデフォルト設定をある程度引き継いだ設定をしてくれます。
  • Migrating to v1.0.0 - ESLint
• 各ルールについては以下を参照して下さい。
  • List of available rules - ESLint

3. webpackの設定を行う

webpackの設定ファイル（例：webpack.config.js）に、先程インストールしたESLint用ローダーを有効にする設定を記述します。

module.exports = {
  ...
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      }
    ]
  },
  eslint: {
    configFile: './.eslintrc'
  }
  ...
};

• node_modules ディレクトリ内のファイルは対象外としています。
• カレントディレクトリ直下の .eslintrc（ESLintの設定ファイル）を使用するように指定しています。
• 詳しくは以下のドキュメントを参照して下さい。
  • eslint-loader
    • https://www.npmjs.com/package/eslint-loader
  • webpack - loaders
    • http://webpack.github.io/docs/loaders.html
  • webpack - configuration
    • http://webpack.github.io/docs/configuration.html#module-loaders

以上の手順で、webpackが JavaScriptファイルを読み込む時に ESLint を使ってコードをチェックしてくれます。

webpack から Babel を使う設定 に書いた設定に、今回の設定を追加すれば、ES6の文法もチェックできます。（今回の .eslintrc に記述しているように env.es6 に true をセットします）

最終更新日: 2015-08-25