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