gulp gulp-eslint の設定

gulp で行う構文チェックのまとめ

案件でgulpを使っている環境にあたったので、eslintやhtmlhint回りのメンテナンスと備忘録
gulp-eslint などを調べると過去の記事がヒットしてくるので公式をみつつ手直ししていく

gulp-eslint

※ .eslintrc は作成されている前提で進めます

1. gulp-eslint インストール

npm i -D gulp-eslint

gulp-eslint をインストール
使うのはこれだけ

他のサイトでplumber とか node-notifierを使ってたりするけど使わない
console.errorとかもしない

2. eslint タスク作成

gulp-eslint 公式: https://www.npmjs.com/package/gulp-eslint

gulp.task('lint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
});

ほぼ公式のコードを持って来ただけ
違うのは ({useEslintrc: true}) ぐらい

useEslintrc

このオプションは.eslintrcファイルを使ってチェックするかどうかのフラグ
trueにすればディレクトリに置いてある.eslintrcファイルでチェックしてくれる

ファイルを使わないのであれば設定を渡してチェックすることも出来る

ESLint 最初の一歩 - ルールのオプションを使う

gulp.src(['**/*.js','!node_modules/**'])
    .pipe(eslint({
        rules: {
            'my-custom-rule': 1,
            'strict': 2
        },
        globals: [
            'jQuery',
            '$'
        ],
        envs: [
            'browser'
        ]
    }))
.pipe(eslint.format())
.pipe(eslint.failAfterError());

eslint.format

ターミナルにログを出力する機能
console.error などで手動で出さなくても機能があるので使いましょう
ログはこんな感じでわかりやすく表示されます

eslint.format()

オプションで出力する形式を選択できます
他のオプションのcheckstyleを使ってみるとこんな感じでフォーマットされてない状態で表示されます

eslint.format('checkstyle')

他にも個別に色々ログの表示を設定できると思うけど、ここはデフォルトのままで良いと思う

eslint.failOnError

タスクを止めてエラーを出力するというもの
途中でとめてしまうのでeslintタスク自体も止まり1件だけ表示される

gulp.task('lint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.failOnError());
});

eslint.failAfterError

こちらはすべてのタスクが完了したあとに処理を止めてエラーを出力する
なのでエラーを全件表示できる

gulp.task('lint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
});

eslint.result

eslintで検出したエラーのオブジェクトをここで取得できる

{
  filePath: '/hoge.js', //問題の起きたファイルのパス
  messages: [ [Object], [Object] ],
  errorCount: 2, //エラーの件数
  warningCount: 0, //warrningの件数
  fixableErrorCount: 0,
  fixableWarningCount: 0,
  source: 'エラーが発生した内容'
}

こんな塊で入っているので公式では下のようにエラーの件数を表示している

gulp.task('eslint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.results(results => {
          //Called once for all ESLint results.
          console.log(`Total Results: ${results.length}`);
          console.log(`Total Warnings: ${results.warningCount}`);
          console.log(`Total Errors: ${results.errorCount}`);
    }));
});

3. 起動時にタスクを作動させるのかwatchで動かすのか

起動時にタスクを実行する場合はビルドと一緒に実行させる

gulp.task("default",['build','eslint'])

以降は watch で変更のあったファイルのみlintでチェックする

gulp.task('eslint', () => {
    return gulp.src(['**/*.js','!node_modules/**'])
        .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
        .pipe(eslint.format())
        .pipe(eslint.results(results => {
          //Called once for all ESLint results.
          console.log(`Total Results: ${results.length}`);
          console.log(`Total Warnings: ${results.warningCount}`);
          console.log(`Total Errors: ${results.errorCount}`);
    }));
});

gulp.task("default",['eslint'], function() {
  gulp.watch("src/**/*.js",function(e){
    gulp.src(e.path)
    .pipe(eslint({ useEslintrc: true })) // .eslintrc を参照
    .pipe(eslint.format());
  });
});

おわり

gulpを使う案件もだんだん減ってきたけど、大手とかではまだまだ現役だし
gulp自体は使いやすいので色々勉強になった

こういう書き方あるよ！ってのがあれば教えていただけると幸いです