ESLint を導入しようとしたらトラブった

JavaScript の開発環境を整備しようと思って色々と試しているんですが、その一つに ESLint がありました。ESLint は、書いた JavaScript のコードを静的に構文チェックしてくれるナイスガイで、そのチェックルールも設定ファイルをいじることで自由に変更できます。

これからコードを書くなら何らかの構文チェックは入れておくべきかと思って、サラッと入れてみたら見事に躓いたので、メモとして残しておきます。ちなみに自分の環境は Windows 10 なので、Mac ユーザが同じトラブルに巻き込まれるかは存じ上げません。あと、この情報は 2017/7/7 の段階のものなので、あなたがこの記事を目にしたときにはすでに直っている可能性もあります。

ESLint 導入からトラブル発生まで

ESLint 自体の導入は npm だろうが、yarn だろうがどちらでも良いのですが、今回は yarn で入れてみました。yarn の場合は、普通に『yarn add –dev eslint』（npm だと『npm install –save-dev eslint』）と実行すれば最新の ESLint（自分の試したときは 4.1.1）が導入されます。

導入後は構文チェックのルールの定義として .eslintrc というファイルを作成します。ここでは React にも対応しているという噂の通りに airbnb のスタイルを利用するようにしてみました。

{
  "extends": "airbnb"
}

さて、いざテストをしてみようとすると以下の様なエラーが……。

C:\Project\hogefuga>yarn test
yarn test v0.27.5
$ eslint src
[object Object]:
ESLint configuration is invalid:
- Unexpected top-level property "ecmaFeatures".
Referenced from: C:\Project\hogefuga\node_modules\eslint-config-airbnb\index.js
Referenced from: C:\Project\hogefuga\.eslintrc.json
Error: [object Object]:
ESLint configuration is invalid:
- Unexpected top-level property "ecmaFeatures".
Referenced from: C:\Project\hogefuga\node_modules\eslint-config-airbnb\index.js
Referenced from: C:\Project\hogefuga\.eslintrc.json
at validateConfigSchema (C:\Project\hogefuga\node_modules\eslint\lib\config\config-validator.js:187:15)
at Object.validate (C:\Project\hogefuga\node_modules\eslint\lib\config\config-validator.js:200:5)
at loadFromDisk (C:\Project\hogefuga\node_modules\eslint\lib\config\config-file.js:549:19)
at load (C:\Project\hogefuga\node_modules\eslint\lib\config\config-file.js:592:20)
at configExtends.reduceRight.e (C:\Project\hogefuga\node_modules\eslint\lib\config\config-file.js:421:36)
at Array.reduceRight (native)
at applyExtends (C:\Project\hogefuga\node_modules\eslint\lib\config\config-file.js:405:28)
at loadFromDisk (C:\Project\hogefuga\node_modules\eslint\lib\config\config-file.js:556:22)
at load (C:\Project\hogefuga\node_modules\eslint\lib\config\config-file.js:592:20)
at configExtends.reduceRight.e (C:\Project\hogefuga\node_modules\eslint\lib\config\config-file.js:421:36)
error Command failed with exit code 1.

とりあえずバージョンを落とす作戦へ

エラーメッセージでググってみると、以下の情報を発見した。https://github.com/eslint/eslint/issues/8726

曰く、「Airbnb のスタイルはまだ ESLint バージョン 4以降に対応してないよ」とのこと。何てこった……。

ということで、暫定的な対処として ESLint のバージョンを 3 系に戻すことに。『yarn add –dev eslint@3.19.0』とコマンドを打って実行してバージョンを巻き戻してもう一度実行すると今度は上手く動いた！この世界、進歩が速すぎてこの手のハマりポイント多すぎ……。