【Reactの勉強】環境構築(ESLintの設定)

概要

前回に引き続き、環境構築を行う。
今回はESLintの設定を行う。

ESLintは現時点(2021年1月)における、JS界のデファクトスタンダードのLinterのようである。

eslint.org

適宜、以下の本を参考にさせて頂きながら進める。(以下、『りあクト！』)

oukayuka.booth.pm

バージョン

「Reactの勉強」で使用している主なソフトウェアのバージョンは以下の通り。

node: 15.5.0
react-create-app: 4.0.1
react: 17.0.1
react-dom: 17.0.1
typescript: 4.1.3
eslint: 7.17.0
prettier: 2.2.1

インストールされていることの確認

『りあクト！』によると、ESLintはcreate-react-appコマンド実行時にインストールされるreact-scriptsモジュールの中に含まれているとのことなので、インストール済みであることを確認する。

$ npm ls eslint
react_tutorial_nihon_u_1@0.1.0 /path/to/react_tutorial_nihon_u_1
└─┬ react-scripts@4.0.1
  ├─┬ @typescript-eslint/eslint-plugin@4.11.1
  │ ├─┬ @typescript-eslint/experimental-utils@4.11.1
  │ │ └── eslint@7.17.0 deduped
  │ └── eslint@7.17.0 deduped
  ├─┬ @typescript-eslint/parser@4.11.1
  │ └── eslint@7.17.0 deduped
  ├─┬ babel-eslint@10.1.0
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-config-react-app@6.0.0
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-plugin-flowtype@5.2.0
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-plugin-import@2.22.1
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-plugin-jest@24.1.3
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-plugin-jsx-a11y@6.4.1
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-plugin-react-hooks@4.2.0
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-plugin-react@7.22.0
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-plugin-testing-library@3.10.1
  │ ├─┬ @typescript-eslint/experimental-utils@3.10.1
  │ │ └── eslint@7.17.0 deduped
  │ └── eslint@7.17.0 deduped
  ├─┬ eslint-webpack-plugin@2.4.1
  │ └── eslint@7.17.0 deduped
  └── eslint@7.17.0

→ インストールされていることは確認できた。