潜在的な問題を見つけるため、コードをlintしましょう。ESLintはES6コード用のlinterです。ルールを自身で細かく設定する代わりに、Airbnbが作った設定を利用します。この設定はプラグインをいくつか使うため、プラグインをインストールする必要があります。
yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-reactを実行します
このように、複数のパッケージを一つのコマンドでインストールできます。いつものように、これらは全て`package.jsonに追加されます。
package.jsonに以下のようなeslintConfigフィールドを追加します:
"eslintConfig": {
"extends": "airbnb",
"plugins": [
"import"
]
},pluginsの部分はES6のimport構文を使うことをESLintに教えています。
注意: プロジェクトのルートにある.eslintrc.jsや.eslintrc.json、.eslintrc.yamlファイルの代わりに、package.jsonファイルのeslintConfigフィールドを使うこともできます。Babelの設定と同様、ルートフォルダが多くのファイルで溢れるのを避けるためこのようにしていますが、ESLintの設定が複雑化してきたら、この代替策を検討してください。
ESLintを実行するためのGulpタスクが必要です。そのため、ESLint Gulpプラグインをインストールします。
yarn add --dev gulp-eslintを実行します
次のようなタスクをgulpfile.babel.jsに追加します:
import eslint from 'gulp-eslint';
const paths = {
allSrcJs: 'src/**/*.js',
gulpFile: 'gulpfile.babel.js',
libDir: 'lib',
};
// [...]
gulp.task('lint', () => {
return gulp.src([
paths.allSrcJs,
paths.gulpFile,
])
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});Gulpにこのタスクを伝えるため、gulpfile.babel.jsと、src以下にあるJSファイルをインクルードする必要があります。
以下のように、Gulpタスクbuildの前提条件にlintタスクを追加します:
gulp.task('build', ['lint', 'clean'], () => {
// ...
});yarn startを実行すると、Gulpfile内のたくさんのlintのエラーと、index.js内でconsole.log()を使っている警告が表示されるはずです。
警告の一種として、'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)といった出力があるとか思います。これは実際には誤検知に当たります。ESLintはビルド時のみに使われるJSファイルがどれで、そうではないJSファイルがどれかを知ることができません。そのため、コード内のコメントを使ってESLintに教えてあげる必要があります。gulpfile.babel.jsファイルの先頭に、以下を追加します:
/* eslint-disable import/no-extraneous-dependencies */こうすることで、ESLintはこのファイルにimport/no-extraneous-dependenciesルールを適用しなくなります。
残る問題はUnexpected block statement surrounding arrow body (arrow-body-style)です. これは貴重な指摘です。ESLintは以下のようなコードのもっと良い書き方を教えてくれているのです。
() => {
return 1;
}これは次のように修正するべきです:
() => 1関数がreturn文しか含まない場合、ブレースとreturn文とセミコロンを省略できるためです。
それではGulpファイルを正しく修正してみましょう:
gulp.task('lint', () =>
gulp.src([
paths.allSrcJs,
paths.gulpFile,
])
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError())
);
gulp.task('clean', () => del(paths.libDir));
gulp.task('build', ['lint', 'clean'], () =>
gulp.src(paths.allSrcJs)
.pipe(babel())
.pipe(gulp.dest(paths.libDir))
);最後の問題はconsole.log()についてのものです。この例で問題の元となっているindex.js内でのconsole.log()は正しいものであることを伝えましょう。ご想像の通り、/* eslint-disable no-console */をindex.jsの先頭に置きます。
yarn startを実行すると、すべて解決されている状態に戻ります。
注意: この章ではコンソール用にESLintを設定しています。ビルド時/pushする前にエラーを見つけられるのは素晴らしいことですが、もしかするとIDEにも統合したくなるかもしれません。しかし、IDEに付属しているES6用のlintツールを使わないでください。そのツールがlinting用に使っているバイナリはnode_modulesフォルダにあるように設定してください。そううするとそのツールはプロジェクトの全ての設定、Airbnbのプリセットなど全てが利用できるようになります。そうでなければ、一般的なES6のlintingしか使えるようになりません。
(原文: 6 - ESLint)