# React Nativeにコードフォーマッター（ESLint・Prettierを導入する）
Table of Contents
インストール ESLint
まずはESLintを導入する
npm install --save-dev eslintReact Nativeには基本的に入っているという情報があったが、検索しても引っかからなかったので、上記コマンドでインストールした。
+ "eslint": "^8.49.0",package.jsonを確認し、追加されたことを確認した。
Setting ESLint
次にESLintの設定をしていく。
npx eslint --init上記コマンドで設定をスタートする。
You can also run this command directly using 'npm init @eslint/config'.Need to install the following packages: @eslint/create-config@0.4.6Ok to proceed? (y) yまず、なんか追加でインストールしろと言われたのでインストールする。
その後、設定が始まる。
? How would you like to use ESLint? (Use arrow keys) // ESLintをどのように利用しますか？ To check syntax only // 構文のみをチェック To check syntax and find problems // 構文をチェックし問題を見つける> To check syntax, find problems, and enforce code style // 構文をチェックし問題を見つけ、コードスタイルを強制します文法をチェックするだけではなく、自動で修正までを行ってもらうことにした。
? What type of modules does your project use? ... // プロジェクトでどの種類のモジュールを使用しますか？> JavaScript modules (import/export) // JavaScriptモジュール (import/export) CommonJS (require/exports) // CommonJS (require/exports) None of these // どちらでもないReact Nativeでは主にimport/exportを使うのでJavaScript modules (import/export)を選択して次に進める。
? Which framework does your project use? ...> React Vue.js None of theseReact NativeはReactを基盤にするのでReactを選択する
? Does your project use TypeScript? » No / Yes使用するのでYesを選択する。
Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection) Browser√ NodeReact NativeはNodeベースなのでNodeを選択する
? How would you like to define a style for your project? ... // プロジェクトのスタイルをどのように定義しますか？ Use a popular style guide // 人気のあるスタイルガイドを使用> Answer questions about your style // スタイルについて質問に答えるどのスタイルガイドを使うのか選択するか、勝手に決められるのも怖いので自身で選択するにした。
? What format do you want your config file to be in? ...> JavaScript YAML JSONESLintの設定ファイルをどのように持つか。JavaScriptにした。
? What style of indentation do you use? ...> Tabs Spacesインデントをどう持つかはタブにした。
※ のちにスペースに変更する（いつもスペースなのに間違えた。）
? What quotes do you use for strings? ... Double> Singleシングルクォーテーションかダブルクォーテーションかの選択、シングルにした。
? What line endings do you use? ...> Unix Windows改行（行末の処理）の方法を選ぶもの、Unixを選ぶのが標準っぽいのでそれにならった。
Do you require semicolons? » No / Yesセミコロンの有無について、いつもつけないので、Noにした。
@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest? Would you like to install them now? » No / Yes設定を終えると、必要なパッケージを提案してくれたので、Yesでそれを受け入れる、
? Which package manager do you want to use? ...> npm yarn pnpmパッケージマネージャーを聞かれるので、使用しているマネージャーを選択する。
これで設定は完了した。
実行していく
次にpackage.jsonにスクリプトを登録する。
"lint": "eslint .",npm run lintで実行すると
1:44 error Extra semicolon semi 2:42 error Extra semicolon semi 7:1 error Expected indentation of 1 tab but found 2 spaces indent 8:1 error Expected indentation of 2 tabs but found 4 spaces indent 8:5 error 'React' must be in scope when using JSX react/react-in-jsx-scope 9:1 error Expected indentation of 3 tabs but found 6 spaces indent 9:7 error 'React' must be in scope when using JSX react/react-in-jsx-scope 10:1 error Expected indentation of 3 tabs but found 6 spaces indent 10:7 error 'React' must be in scope when using JSX react/react-in-jsx-scope 11:1 error Expected indentation of 2 tabs but found 4 spaces indent 12:1 error Expected indentation of 1 tab but found 2 spaces indent 12:4 error Extra semicolon semi無事にソースに対してLintが働いていることが分かった。
スクリプトに--fixオプションをつけることで、
"lint": "eslint . --fix"修正まで行ってくれ、エラーが3件まで減った。
8:3 error 'React' must be in scope when using JSX react/react-in-jsx-scope 9:4 error 'React' must be in scope when using JSX react/react-in-jsx-scope 10:4 error 'React' must be in scope when using JSX react/react-in-jsx-scopeちなみにエラーは上記の通り。
こちらは.eslintrc.jsのrulesに下記設定を追加することで回避できる。
'react/jsx-uses-react': 'off', 'react/react-in-jsx-scope': 'off',これで無事にエラーがゼロ件になった。
アプリが無事に立ち上げることも確認できたのでESLintの導入は成功した。
インストール Prettier
次にPrettierをインストールする。
npm install --save-dev prettier eslint-plugin-prettierルートに.prettierrc.jsを作成し、下記内容を記載する。
module.exports = { semi: false, singleQuote: true, trailingComma: 'all',};ESLintへPrettierを設定する
.eslintrc.jsに下記のように反映する
'plugins': [ '@typescript-eslint', 'react', + 'prettier' ],rulesに 'prettier/prettier': 'error',を追加する。
最後にスクリプトを登録する。
"format": "prettier --check ."実行していく
実行すると
[warn] .eslintrc.js[warn] app.json[warn] App.tsx[warn] babel.config.js[warn] globals.d.ts[warn] prettierrc.js[warn] styles.css[warn] tailwind.config.js[warn] tsconfig.json[warn] Code style issues found in 9 files. Run Prettier to fix.という結果に。
修正まで行ってくれるようにする。
"format": "prettier --write ."上記行うと修正まで行ってくれたけれど、そのあとにESLintを実行すると膨大なWarningが出るようになってしまった。
ESLintでセミコロン消してるのにPrettierでつけてたりしていて、見る感じ競合している。
prettierrc.jsに.が必要なことを忘れていた。後はESLintの設定と競合しないように設定を変えていけばできた。
