webpack から ESLint を使う設定

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 の時のデフォルト設定をある程度引き継いだ設定をしてくれます。
  • 各ルールについては以下を参照して下さい。

3. webpackの設定を行う

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


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

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

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

最終更新日: 2015-08-25

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*