ESLint の導入がうまくいかなかった件のメモ書き【Windows】

プログラム

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

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

eslint logo

これからコードを書くなら何らかの構文チェックは入れておくべきかと思って、サラッと入れてみたら見事に躓いたので、メモとして残しておきます。ちなみに自分の環境は 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』とコマンドを打って実行してバージョンを巻き戻してもう一度実行すると今度は上手く動いた!この世界、進歩が速すぎてこの手のハマりポイント多すぎ……。

コメントはまだありません

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プログラム
AWS 利用料支払いをクレジットカードで出来なかった件

とある昼下がりの午後(だったかは定かではない)に一通のメールが届きました。 タイトルはこんな感じです …

プログラム
ファイルを読み込む html/JavaScript をローカル環境で実行したかった件

ローカル環境で html/JavaScript を書いている機会が増えて、色々と詰まったところがあっ …

プログラム
既存のローカルプロジェクトを GitHub に移行する時にハマったメモ

現在ローカルで作成中のウェブアプリ(Rails アプリ)を GitHub でバージョン管理しようと思 …