Eslintに関係するmodulのインストール
yarn add babel-eslint gulp-eslint eslint-config-airbnb-base eslint-plugin-import --dev
src/.eslintrcを作成
{
"parser": "babel-eslint"
}
gulpfile.js
const {src, dest, watch} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const server = browserSync.create();
function icon(done){
for(let size of sizes){
let width = size[0];
let height = size[1];
src('./favicon.png')
.pipe($.imageResize({
width,
height,
crop: true,
upscale: false
}))
.pipe($.imagemin())
.pipe($.rename(`favicon-${width}×${height}.png`))
.pipe(dest('./dist/images/icon'));
}
done();
}
function styles(){
return src('./src/sass/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.postcss([
autoprefixer({
"overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
cascade: false
})
]))
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/css'));
}
function scripts(){
return src('./src/js/*.js')
.pipe($.sourcemaps.init())
.pipe($.babel())
.pipe($.sourcemaps.write('.'))
.pipe(dest('./dist/js'));
}
//ここから付け加える
function lint(){
return src('./src/js/*.js')
.pipe($.eslint({fix: true}))
.pipe($.eslint.format())
.pipe($.eslint.failAfterError())
.pipe(dest('./src/js'))
}
//ここまで
function startAppServer(){
server.init({
server: {
baseDir: './dist'
}
});
watch('./src/**/*.scss', styles);
watch('./src/**/*.scss').on('change', server.reload);
}
exports.icon = icon;
exports.styles = styles;
exports.scripts = scripts;
exports.lint = lint;//ここを付け加える
exports.serve = startAppServer;
.pipe($.eslint({fix: true}))はlintチェック(記述のフォーマットチェック)に引っかかった際に自動で修正してくれる
.pipe($.eslint.format())はエラーメッセージを見やすくしてくれるメソッド
.pipe($.eslint.failAfterError())は、Eslintの場合は一つの処理ずつlintチェックをかけていくが、その処理全てが完了してからformat()でエラー内容を出力するようにする
以下実行
gulp lint
このままではエラーメッセージはでない
ルールを追加する
.eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb-base" //ここ追加
}
これでgulp lintを実行するとエラーが走る
なぜこのようにairbnbのような設定ファイルを使うか
Eslintiは基本的に設定項目が多すぎる
大規模アプリケーションのような場合はEslintを独自に作ってもいいが、中・小規模のアプリケーションの場合は、資金が十分にあるような起業が作成したEslintの設定ファイルをそのまま使うほうが変な独自ルールなどが入っていなくて良い。
特定のエラーを条件を除外したい場合
.eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb-base",
"rules":{ //ここに追加
"no-undef":0,
"no-alert":0,
"no-use-before-define":0,
"no-unused-vars":0
}
}