ESLintを使ったJavaScriptの検証をGitやGulpで自動化する

前回の記事では、JavaScriptの検証ツール「ESLint」を使用して基本的な検証を始めるまでの手順をまとめました。

下記のコマンドで個別にJSファイルの検証を行うことも可能ですが、手動で検証を行うのは大変です。

eslint <ファイル名>

今回は、GitやgulpのフローにESLintの検証を組み込み、自動化する方法を調べました。

Git

pre-commitを使用したGitとESLintの連携

Gitには特定のアクションが発生した時にスクリプトを実行するGitフックという機能があります。
この機能で使用するファイルは、.git/hooks 内に格納されています。
.git/hooks を開くと様々なタイミングで実行されるGitフックのスクリプトが記載されたサンプルファイルが格納されています。

ESLintによるJavaScriptの検証はコミットを開始する前に行いたいので、pre-commit を使用します。

Gitフックの処理はシェルスクリプトで記述されていますので、
pre-commit.sampleのファイル名をpre-commitに変更するか、pre-commitを新規作成して、下記のような内容に書き換えます。

#!/bin/sh

echo "ESLintによるjsファイルの検証中..."

files=$(git diff --cached --name-only --diff-filter=ACM | grep ".js$")
if [ "$files" = "" ]; then
  echo "該当ファイルなし"
  exit 0
fi

pass=true

for file in ${files}; do
  result=$(node node_modules/eslint/bin/eslint.js ${file} -f compact | grep "Error")
  if [ "$result" = "" ]; then
    echo "ESLint 成功: ${file}"
  else
    echo "ESLint エラー: ${file}"
    echo "---------------------------------------------"
    echo "$result"
    echo "---------------------------------------------"
    pass=false
  fi
done

if ! $pass; then
  echo "COMMIT 失敗: ESLintによる検証で検証エラーが発生しました。検証エラーを解決してから再度COMMITしてください。"
  exit 1
else
  echo "COMMIT 成功"
  exit 0
fi

上記のシェルスクリプトでは、
ESLintの検証対象となるjsファイルをリストアップし、
各ファイルに対してESLintによる検証を行っています。

1つでも検証エラーがある場合は、シェルスクリプトから終了コード「1」が返却されます。
pre-commitでは「0」以外の終了コードが返却されるとコミットが中断されますので、
検証エラーを解決するまではコミットすることができなくなります。

それでは、実際に試してみましょう。

ESLintの設定ファイルをプロジェクトルートに作成します。
今回は下記のような設定ファイル（.eslintrc）を使用します。

 
{
    "extends": "eslint:recommended",
    "rules": {
        "no-unsafe-finally": "off",
        "no-native-reassign": "off",
        "complexity": ["off", 11],
        "comma-dangle": "error",
        "require-yield": "error"
    }
}

検証対象となるjsファイルは前回の記事と同様下記のソースを使用します。

 
var list= [1,3,5,7,9,];
sum(list);

// 配列の合計を返す
function sum(arr) {
  var total = 0,
      len = arr.length;
  for (var i=0; i<len; i++) {
    total += arr[i];
  }
  return total;
} 

検証対象となるjsファイルをコミットしようとすると・・・

このように、pre-commitファイルに設定したESLintを使った検証でエラーが発生し、コミットすることができませんでした。

 line 1, col 21, Error - Unexpected trailing comma. (comma-dangle)

エラー内容を確認すると、1行目の配列の一番最後のカンマに対してエラーが発生していますので、
このカンマを削除すると、コミットができるようになります。

gulp

gulp-eslintを使用したgulpとESLintの連携

ESLintを使ったJavaScriptの検証はgulpのタスクに登録することも可能です。

gulp環境を作成済みであれば、下記のプラグインをインストールします。

・gulp-eslint
・gulp- plumber

gulpfile.jsに下記のような内容の処理を追加します。

"use strict";
var gulp = require('gulp');
var eslint = require('gulp-eslint');
var plumber = require('gulp-plumber');

gulp.task('lint', function() {
  return gulp.src(['js/*.js'])  // 検証対象のファイルを指定
    .pipe(plumber())
    .pipe(eslint({ useEslintrc: true }))
    .pipe(eslint.format())
    .pipe(eslint.failOnError())
    .pipe(plumber.stop());
});

gulp.task('watch',function(){
    gulp.watch('js/*.js', ['lint']);  //検証対象のファイルを指定
});

gulp.task('default', ['lint', 'watch']);

処理を追加後にgulpを実行すると、まず実行時に対象ファイルの検証を行い、
その後も対象ファイルの変更を監視し続け、変更毎に検証結果を出力します。

Plumber found unhandled error:
ESLintError in plugin 'gulp-eslint'
Message:
    Unexpected comma in middle of array.
Details:
    fileName: C:\Users\xxxx\js\test.js
    lineNumber: 1
C:\Users\xxxx\js\test.js
  1:21  error  Unexpected trailing comma  comma-dangle

✖ 1 problem (1 error, 0 warnings)

まとめ

ESLintは検証項目もカスタマイズの自由度が高いので、
自分が間違えやすい項目を1項目からでも自動でチェックできるようになれば、制作物の品質向上につながるのではないかと思います。

Gitでの検証を行う場合は、検証内容がシビアすぎると中々コミットできませんのでご注意ください・・。

参考

・チーム開発において、commit直前にESLintを自動実行する - Qiita
※pre-commitの記述を参考にさせていただきました。
・[GitHub 奮闘記] gulp で eslint 設定とコード チェック環境の共有 - Qiita
※gulpfile.jsの記述を参考にさせていただきました。
・Git - Git フック
など