gulp gulp-eslint の設定

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

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

# gulp-eslint

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

## 1. gulp-eslint インストール

```javascript
npm i -D gulp-eslint
```

`gulp-eslint` をインストール
使うのはこれだけ
<font color="Red">
**他のサイトで`plumber` とか `node-notifier`を使ってたりするけど使わない
`console.error`とかもしない**
</font>

## 2. eslint タスク作成


[gulp-eslint 公式:  https://www.npmjs.com/package/gulp-eslint](https://www.npmjs.com/package/gulp-eslint)

```javascript

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 最初の一歩 - ルールのオプションを使う ](https://qiita.com/mysticatea/items/f523dab04a25f617c87d#-%E3%83%AB%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86)

```javascript

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` などで手動で出さなくても機能があるので使いましょう
ログはこんな感じでわかりやすく表示されます

<img width="369" alt="スクリーンショット 2018-02-20 16.10.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/8c4e442b-3ad4-e8a7-4fbb-b39aed266d63.png">

```javascript
eslint.format()
```


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

<img width="783" alt="スクリーンショット 2018-02-20 16.09.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/bba9d490-5df2-4c0f-f0b7-920a4548f4e3.png">


```javascript
eslint.format('checkstyle')
```

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


### eslint.failOnError

タスクを止めてエラーを出力するというもの
途中でとめてしまうのでeslintタスク自体も止まり1件だけ表示される
<img width="356" alt="スクリーンショット 2018-02-21 19.41.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/c0b16dad-9122-860c-49de-3b1124190e3c.png">


```javascript

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

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

<img width="357" alt="スクリーンショット 2018-02-21 19.42.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/94381d00-2179-9733-2099-eecdb1d98b05.png">

```javascript

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


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

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

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


```javascript

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で動かすのか

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

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

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

```javascript

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自体は使いやすいので色々勉強になった

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