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
ファイルでチェックしてくれる
ファイルを使わないのであれば設定を渡してチェックすることも出来る
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自体は使いやすいので色々勉強になった
こういう書き方あるよ!ってのがあれば教えていただけると幸いです
Author And Source
この問題について(gulp gulp-eslint の設定), 我々は、より多くの情報をここで見つけました https://qiita.com/choro/items/83507a3c46092a1470ca著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .