React 環境構築と Linter・Formatter 設定

特にLinter・Formatterの設定に苦労したので、同じところで躓かないよう備忘録として残す。

このページを参照した

○ まずはじめに

npm：Node Package を管理(manage)するコマンド
npm は Node.js のデフォルトのパッケージ管理ツールです。npm コマンドを利用することでインターネット上のリポジトリから Node パッケージをインストールしたり、パッケージのバージョン管理をする
npx：Node Package を実行(execute)するコマンド
npx は Node.js のパッケージランナーツールです。バージョン 5.2 からデフォルトでインストールされるようになりました。npx コマンドを利用することで Node パッケージをより手軽に実行可能にする

○React をインストール

rtd0131がプロジェクト名
「npx create-react-app rtd0131」を実行
→「npm start」で React アイコン表示

○Linter の設定

「npx eslint —init」を実行 linter として ESlint をインストール
→ 以下の通り質問に回答した

How would you like to use ESLint?
: To check syntax, find problems, and enforce code style
What type of modules does your project use?
:JavaScript modules(import/export)
Which framework does your project use?
:React
Does your project use TypeScript?
:No
Where does your code run?
:Browser
How would you like to define a style for your project?
:Use a popular style guide
:Airbnb
What format do you want your config file to be in?
:JSON
Would you like to install them now with npm?
:Yes

「npx eslint」を実行
「./node_modules/.bin/eslint src/App.js」を実行
エラーが出る
エラー解決のために「package.json」内の eslintConfig 内の記載を削除
「eslintrc.json」内の「rules」に”react/jsx-filename-extension”:[“error”,{“extensions”:[“.js”,”jsx”]}]を記載
「./node_modules/.bin/eslint —fix src/App.test.js」を実行
→'React' must be in scope when using JSX とエラー
「.eslintrc.js」の「rules」に以下を記載
→”react/react-in-jsx-scope”:”off”
再度「./node_modules/.bin/eslint —fix src/App.test.js」を実行
→ エラーはでなかった
「package.json」の scripts に ESLint の実行を追加
→「”lint”:”eslint —ext .jsx,.js src/“」

○Formatter の設定

「npm install —save-dev —save-exact prettier」を実行
→ エラーが出てインストールできていない(package.json にも記載されていない)
package.json 内の「,」のつけ忘れがあった
「npm i -D prettier」を実行
npm i（省略せずに記述すると npm install）はインストールの命令、-D はインストール先を devDependencies にするための指定
「echo {}> .prettierrc.json」で Prettier の設定ファイル .prettierrc.json（空）を用意
「touch .prettierignore」で Prettier の除外ディレクトリやファイルを指定するように, .prettierignoreも追加
ESLintを入れている関係で, ESLint と Prettier で競合するルールがあるので, ESLint 側に設定を追加
「npm install —save-dev eslint-config-prettier」で、eslint-config-prettier は, ESLint と Prettier で競合するルールを, ESLint 上でオフにするために使う
.eslintrc.json 内の extends 末尾に prettier を追加
公式のコメント通り, Eslint の何の Plugin を使っているかによって, 必要な Prettier の記載を追加。"prettier" は基本として入れて"prettier/react" も入れます。
ESLint の各種ルール（airbnb とかの）を, prettier 系で上書きして競合ルールをオフにするため, 末尾にいれる必要がある感じです。（後に書かれたもので手前の設定を上書きます）
プロジェクト下に「.vscode」を作成、中身は「setting.json」（VSCode の設定を記述するファイル）
VSCode の設定：設定からワークスペースの設定をいじると自動的に.vscode 内の setting.json に設定が記載される