eslint-loader の使い方

1. eslint-loader

「eslint-loader」は、「webpack」上で動作するJavaScriptの静的コード解析ツールです。文法・構文エラーではないが、潜在的なバグの原因になる要素を検出します。

2. eslint-loaderのインストール

(1) 以下のコマンドで、「eslint-loader」をインストール。

$ npm install --save-dev webpack webpack-cli eslint eslint-loader eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import

(2) 「webpack.config.js」にJSファイルに「eslint-loader」を適用するルールを追加。

module.exports = {
  module: {
    rules: [
      // JSファイルにEslintを適用
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          fix: false,
          failOnError: true,
        }
      },
    ],
  },
}

「options」の設定は、次のとおりです。
・fix: autofixモードの有効化。
・failOnError: エラー検出時にビルド中断。

(3) 「eslint-loader」の設定ファイル「.eslintrc.json」の準備。

{
  // airbnbルールセットの継承
  "extends": "airbnb",

  // ブラウザで動作
  "env": {
    "browser": true
  },

  // ルールの追加
  "rules": {
  }
}

3. eslint-loader の利用

(1) テストコード「src/index.js」の準備。

var name="webpack";
console.log(`Hello ${name}`);

(2) テストコードをビルド。

$ npx webpack

次のようなエラー・警告が表示されます。

  1:1   error  Unexpected var, use let or const instead  no-var
  1:9   error  Operator '=' must be spaced               space-infix-ops
  1:10  error  Strings must use singlequote              quotes
  2:1   warning  Unexpected console statement              no-console​

・エラー: varはletまたはconstにすべき(no-var)。
・エラー: =の左右のスペースを入れるべき(space-infix-ops)。
・エラー: 文字列はシングルクォートを使うべき(quotes)。
・警告: デバッグ用途のconsole.log()は使わないべき(no-console)。

(3) 修正すべき項目は、テストコードを修正。

const name = 'webpack';
console.log(`Hello ${name}`);

(4) 修正しなくて良い項目は、「.eslintrc.json」で無効化。
「.eslintrc.json」の「rules」にキーと値のセットで指定します。

  "rules": {
    "no-console": 0    
  }

値の意味は次のとおりです。

0: off
1: warn
2: error

(5) 再度ビルドしてエラー・警告が表示されないことを確認。

$ npx webpack