Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
15
Help us understand the problem. What is going on with this article?
@choro

gulp gulp-eslint の設定

More than 3 years have passed since last update.

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

スクリーンショット 2018-02-20 16.10.48.png

eslint.format()

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

スクリーンショット 2018-02-20 16.09.23.png

eslint.format('checkstyle')

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

eslint.failOnError

タスクを止めてエラーを出力するというもの
途中でとめてしまうのでeslintタスク自体も止まり1件だけ表示される
スクリーンショット 2018-02-21 19.41.26.png


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

eslint.failAfterError

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

スクリーンショット 2018-02-21 19.42.14.png


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

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

15
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
choro
FE で主にReact+reduxの開発が直近 Webpack + CSS next + Redux + redux sagaで開発してます 他にはsocket.ioでチャットツールを作ったりとか 今後やっていくこと https://qiita.com/choro/private/2f196fccc8bab74cb74c

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
15
Help us understand the problem. What is going on with this article?