Eslintを使ったフォーマットチェック

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
   }
}