インストール ESLint

まずはESLintを導入する

npm install --save-dev eslint

React 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.6
Ok 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 these

React 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
√ Node

React 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
  JSON

ESLintの設定ファイルをどのように持つか。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の設定と競合しないように設定を変えていけばできた。