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の連載記事はこちらからどうぞ
http://hirooooo-lab.com/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-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すると、こんなログが出ました。
＄ 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.425s14行目に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についてはこちらを参考にしてください。
[blogcard url=”https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-one-expression-per-line.md”]
.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の採用も検討してみるといいと思います。
- ESLintにAirbnbを反映させるには、eslint-config-airbnbをインストール
- ルールに縛られず、自分のやりやすいルールで書くのがいいと思う
- TypeScriptの採用も検討するといいかもね
次回予告
次回予告というかやろうと思ってること
- Redux Toolkitから作成するDucksパターンで実装する[jin_icon_check_circle]完了
- ESLintでAirbnbのスタイルガイドを実装する[jin_icon_check_circle]完了
- MaterialデザインとCSSを実装する
- ページルーティングを実装する
- 開発環境の効率化をするためにHotReloadとソースマップを実装する
- REST通信を実装する
- ログイン制御のフローを実装する
- デプロイ方法を検討、実装する
次の記事はこちら
http://hirooooo-lab.com/development/react-redux-materialui/勉強するならプログラミングスクールがベスト
今からプログラミングを勉強してプロのエンジニアを目指すなら、プログラミングスクールで勉強するのがベストです！
最短4週間で未経験からプロを育てるオンラインスクールなので、自宅からプログラミングやアプリ開発を学ぶことができます。
コメント