React Nativeにコードフォーマッター（ESLint・Prettierを導入する）

インストール ESLint まずはESLintを導入する React Nativeには基本的に入っているという情報があったが、検索しても引っかからなかったので、上記コマンドでインストールした。 package.jsonを確認し、追加されたことを確認した。 Setting ESLint 次にESLintの設定をしていく。 上記コマンドで設定をスタートする。 まず、なんか追加でインストールしろと言われたのでインストールする。 その後、設定が始まる。 文法をチェックするだけではなく、自動で修正までを行ってもらうことにした。 React Nativeでは主にimport/exportを使うのでJavaScript modules (import/export)を選択して次に進める。 React NativeはReactを基盤にするのでReactを選択する 使用するのでYesを選択する。 React NativeはNodeベースなのでNodeを選択する どのスタイルガイドを使うのか選択するか、勝手に決められるのも怖いので自身で選択するにした。 ESLintの設定ファイルをどのように持つか。JavaScriptにした。 インデントをどう持つかはタブにした。 ※ のちにスペースに変更する（いつもスペースなのに間違えた。） シングルクォーテーションかダブルクォーテーションかの選択、シングルにした。 改行（行末の処理）の方法を選ぶもの、Unixを選ぶのが標準っぽいのでそれにならった。 セミコロンの有無について、いつもつけないので、Noにした。 設定を終えると、必要なパッケージを提案してくれたので、Yesでそれを受け入れる、 パッケージマネージャーを聞かれるので、使用しているマネージャーを選択する。 これで設定は完了した。 実行していく 次にpackage.jsonにスクリプトを登録する。 npm run lintで実行すると 無事にソースに対してLintが働いていることが分かった。 スクリプトに--fixオプションをつけることで、 修正まで行ってくれ、エラーが3件まで減った。 ちなみにエラーは上記の通り。 こちらは.eslintrc.jsのrulesに下記設定を追加することで回避できる。 これで無事にエラーがゼロ件になった。 アプリが無事に立ち上げることも確認できたのでESLintの導入は成功した。 インストール Prettier 次にPrettierをインストールする。 ルートに.prettierrc.jsを作成し、下記内容を記載する。 ESLintへPrettierを設定する .eslintrc.jsに下記のように反映する rulesに 'prettier/prettier': 'error',を追加する。 最後にスクリプトを登録する。 実行していく 実行すると という結果に。 修正まで行ってくれるようにする。 上記行うと修正まで行ってくれたけれど、そのあとにESLintを実行すると膨大なWarningが出るようになってしまった。 ESLintでセミコロン消してるのにPrettierでつけてたりしていて、見る感じ競合している。 prettierrc.jsに.が必要なことを忘れていた。後はESLintの設定と競合しないように設定を変えていけばできた。