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』とコマンドを打って実行してバージョンを巻き戻してもう一度実行すると今度は上手く動いた!この世界、進歩が速すぎてこの手のハマりポイント多すぎ……。

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

コメントを残す

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

サービス開発
1
御朱印地図 Web アプリ『ごしゅつい』をとりあえずリリース!

以前に「将来的に Web アプリ作りたい」と言っていた、御朱印情報とマップを融合させたサービスをとり …

プログラム
【Udemy】インフラ知識欲しさに AWS 講座を受講してみた

個人で Web アプリ開発を志す人間として避けて通れない「どこにデプロイして、Web アプリを公開す …

VuetifyLogo
プログラム
Vuetify Theme Generator を使って Vue アプリのテーマカラーを設定してみた

Vue でアプリ作る時に便利な Vuetify Vue で Web アプリケーションを作ろうと思って …