Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

npmでeslint-config-airbnbを導入してみる

参考にさせて頂いたページ

ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog

ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う | mae's blog

これまでのこと

以前「gulp-eslintの.eslintrcを作成する - MOTOMICHI WORKS BLOG」で色々インストールして、eslintのルールとかを適当に書いて使ってみるところまでやっていました。

前回の記事でeslintによる文法チェックは動作するので、eslint-config-airbnbをextendsすることでチェックされるルールが変わることになります。

eslint-config-airbnb をインストールしようとしたらエラーが出た

一か月ちょっと経った今日、airbnbのやつをextendsして少しいじる方向性にしようと思ったので、

ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog」を参考にインストールを試してみました。

以下のパッケージのうち、以前インストール済みのパッケージもあったので、

  • eslint-config-airbnb
  • eslint-plugin-import
  • eslint-plugin-react
  • eslint-plugin-jsx-a11y
  • eslint

足りない三つだけをインストールしようと思い、以下のコマンドを実行したらエラーが出ました。

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

表示されたエラーの内容は以下の通りです。

npm WARN package.json dev-template-0001@1.0.0 No repository field.
npm WARN peerDependencies The peer dependency eslint@^3.3.0 included from eslint-config-airbnb will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency eslint-plugin-react@^6.0.0 included from eslint-config-airbnb will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency eslint@^3.3.1 included from eslint-config-airbnb-base will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "eslint-config-airbnb" "eslint-plugin-import" "eslint-plugin-jsx-a11y"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package eslint-plugin-react@5.2.2 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer eslint-config-airbnb@10.0.1 wants eslint-plugin-react@^6.0.0

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\motomichi\Desktop\all\git_repos_all\github\MotomichiWorks\dev-template-0001\npm-debug.log

どうも以前インストールした以下の二つのパッケージのバージョンが古いので eslint@^3.3.0 と eslint-plugin-react@^6.0.0 にupdateする必要がありそう。

普通に5個のパッケージを一緒にインストールしたらこんなエラーは出なかったんでしょうね。

package.jsonを編集してから以下のコマンドを実行しました。

npm update

新しいバージョンにアップデートされたので、改めてさっき失敗したコマンドを再度実行してみたら大丈夫でした。

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

これでよし。

.eslintrcの作成とその記述内容

参考ページにならって以下の通り。

{
  "extends": "airbnb"
}

あとはairbnbのルールを基盤に適当にrulesを調整していこうと思います。

今回はここまで。