Development

【React-Redux】ESLintでAirbnbのJavaScriptスタイルガイド導入編 [初心者入門3日目]

React × Reduxの連載記事の3回目です。

今回はESLintのJavascriptコードスタイルを設定していきたいと思います。

ESLintを使用してJavascriptのコードスタイルガイドを導入している人は多いと思いますが、その中でもAirbnbのスタイルガイドが人気なので、できるだけ準拠するよう実装していきたいと思います。

この記事でわかること
  • ESlintの設定方法
  • Airbnbのコードスタイルの設定方法

この記事のターゲットとなる環境

現在の環境状況や前提条件を書いておきます。

前提条件
  • Mac OS Catalina ver 10.15.3
  • 2日目の記事内容まで理解している
  • 環境ターゲット(2020-03-11現在最新)
    • React16.13
    • Redux7.2
    • webpack4.42
    • babel7.8.7
    • eslint6.8

これまでのReact×Reduxの連載記事はこちらからどうぞ

【2020年3月版】React × Redux 初心者入門 React × Redux の初心者向け連載記事です。 ネットで調べると古いバージョンの記事が溢れているので、できるだけ最新環境...

eslint-config-airbnbのインストール

ESLint用のAirbnbの設定ファイルをインストールしたいと思います。

いつも通り以下のコマンドでインストールしてみます。

$ npm install --save-dev eslint-config-airbnb

すると、何やら怒られました。

$ npm install --save-dev eslint-config-airbnb
npm WARN eslint-config-airbnb@18.0.1 requires a peer of eslint-plugin-import@^2.18.2 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb@18.0.1 requires a peer of eslint-plugin-jsx-a11y@^6.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb@18.0.1 requires a peer of eslint-plugin-react@^7.14.3 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb@18.0.1 requires a peer of eslint-plugin-react-hooks@^1.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-airbnb-base@14.0.0 requires a peer of eslint-plugin-import@^2.18.2 but none is installed. You must install peer dependencies yourself.
...
..

どうやらeslint-config-airbnbにはeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reacteslint-plugin-react-hookseslint-plugin-importを必要とするようなので、追加でインストールします。

$ npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import

すると、こんなログが出ました。

$ npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import

> core-js-pure@3.6.4 postinstall /Users/hiro/dev/labo/uriel/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN eslint-config-airbnb@18.0.1 requires a peer of eslint-plugin-react-hooks@^1.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN uriel@1.0.0 No description

+ eslint-plugin-jsx-a11y@6.2.3
+ eslint-plugin-react-hooks@2.5.0
+ eslint-plugin-react@7.19.0
+ eslint-plugin-import@2.20.1
+ eslint-plugin-import@2.20.1
added 62 packages from 37 contributors and audited 12602 packages in 8.425s

14行目にWARNが出ていて、eslint-config-airbnbではeslint-plugin-react-hooks@^1.7.0が必要ですよと。

eslint-config-airbnbの最新モジュール対応がまだなんでしょうかね?

現時点(2020/03/11)だと、eslint-plugin-react-hooksの2.5がインストールされてしまうので、気になる人は1.7までバージョンを落としてインストールすればいいと思います。

とりあえずこれで必要なモジュールのインストールは完了です。

package.jsonはこんな感じになったと思います。

 "dependencies": {
    "@reduxjs/toolkit": "^1.2.5",
    "prop-types": "^15.7.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.0.6",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

続いてeslint-config-airbnbの読み込みをしていきます。

eslint-config-airbnbの反映

.eslintrcの修正

すでに前回の状態でもESLintの設定ファイルは作成済みですので、以下の1行を追加します。

 "extends": "airbnb",

.eslintrcの全体はこんな感じになりました。

{
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true
  },
  "rules": {},
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "extends": "airbnb",
  "ecmaFeatures": {
    "arrowFunctions": true,
    "jsx": true
  }
}

これでAirbnbのコードスタイルが反映されているはずです。

エラーを修正する

AirbnbのESLint設定を反映させると、いろいろな箇所でエラーが発生すると思います。

とりあえず、それらのエラーを推奨されているコードスタイルに修正していきます。

エラーの修正内容については今回は省かさせていただきます。

どうしてもエラーが解消できない場合

Airbnbのコードスタイルは結構ガチガチになっていて、若干みずらかったりするような制約もあったりします。

その時は.eslintrcを修正して、eslintの条件を無視させちゃいましょう。

react/jsx-one-expression-per-lineを無視させてみる

CounterComponent.jsxにcount={counter.value}という箇所があるんですが、react/jsx-one-expression-per-lineでエラーとなります。

count={counter.value}
↓
count=
{counter.value}

本来であればこのように別の行に書けということなんですが、このルールは無視させたいと思います。

react/jsx-one-expression-per-lineについてはこちらを参考にしてください。

.eslintrcのruluesに追加する

.eslintrcに以下を追記して、今回はreact/jsx-one-expression-per-lineを無視させていただきたいと思います。

  "rules": {
    "react/jsx-one-expression-per-line": 0
  },

とりあえずのエラーは出なくなったと思います。

ESLintにAirbnbのJavaScriptスタイルガイドを導入編まとめ

ESLintのコードスタイルをAirbnbに準拠するように変更してみました。

かなりエラーが出て来たんじゃないでしょうか?

Airbnbは結構独特なルールを設定したりしてるので、必ずしも準拠する必要はないと思います。

自分の使いやすいように、メンバーと共有しやすいようなルールを決めて.eslintrcをカスタマイズしていくのが一番だと思います。

今回はJavascriptを基本に進めていますが、TypeScriptを採用してのReact開発はスタンダードになりつつあると思いますので、ESLintの設定と共に、コードのルールや制約チェックを行いたいのであればTypeScriptの採用も検討してみるといいと思います。

次回予告

次回予告というかやろうと思ってること

  • Redux Toolkitから作成するDucksパターンで実装する完了
  • ESLintでAirbnbのスタイルガイドを実装する完了
  • MaterialデザインとCSSを実装する
  • ページルーティングを実装する
  • 開発環境の効率化をするためにHotReloadとソースマップを実装する
  • REST通信を実装する
  • ログイン制御のフローを実装する
  • デプロイ方法を検討、実装する

次の記事はこちら

【React-Redux】Material-UI実装編 [初心者入門4日目] React×Reduxの連載記事の4回目です。 前回までで簡単なカウンターアプリがReact Reduxで出来上がっている状態な...

勉強するならプログラミングスクールがベスト

今からプログラミングを勉強してプロのエンジニアを目指すなら、プログラミングスクールで勉強するのがベストです!

未経験からプロのエンジニアを育てるオンラインブートキャンプ

最短4週間で未経験からプロを育てるオンラインスクールなので、自宅からプログラミングやアプリ開発を学ぶことができます。

オススメ本

COMMENT

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