React Native(TypeScript) に ESLint と Prettier を導入する方法

どーも、ぐるたか@guru_takaです。

React Native(TypeScript) に ESLint と Prettier を導入しました。これから React Native の開発環境を整えたい方の参考になれば幸いです！

以下の GitHub リポジトリに ESLint と Prettier を設定した React Native(TypeScript) のスターターキット（Expo 使用）を公開しています。ぜひお使いください！
参考 gurutaka/react-native-ts-starter-kitGitHub

バージョン情報

react：16.13.1
react-dom：16.13.1
react-native:SDK-41

スポンサードリンク

ESLint と Prettier を導入する流れ
STEP.1：Prettier の導入
STEP.2：ESLint の導入
- 初心者向け：カスタマイズは最低限で OK な場合
- 上級者向け：独自カスタマイズをしたい場合
STEP.3：VS Code の設定
おまけ：ESLint と Prettier のフォーマットスクリプト
最後に

ESLint と Prettier を導入する流れ

STEP.1

Prettier の導入

STEP.2

ESLint の導入

STEP.3

VS Code の設定

注意

VS Code の拡張機能「ESLint」「Prettier」のインストールが必要です。

STEP.1：Prettier の導入

まず Prettier を以下コマンドを実行して、インストールしましょう。

Prettier のインストール

# npm
npm install -D prettier

# yarn
yarn add -D prettier

続いて Prettier によるコード整形のルールを好みに合わせて、package.json に記述しましょう。私が記述したルールは以下のようになります。

package.json

  "prettier": {
    "trailingComma": "all",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true,
    "printWidth": 80
  },

参考 OptionsPrettier 公式ドキュメント

以上で、Prettier の導入と整形ルールの設定が完了になります！

MEMO

.prettierrc に設定を書いても OK です！

私は設定ファイルを増やしたくないため、package.json に記述しています。

STEP.2：ESLint の導入

次は ESLint の導入をします。ここでは初心者向けと上級者向け、２つの方法を紹介します

初心者向け：カスタマイズは最低限で OK な場合

React Native 公式が公開している @react-native-community/eslint-config を使うと、超簡単に高度な ESLint の設定が可能になります。
参考 @react-native-community/eslint-confignpm

@react-native-community/eslint-config には、React Native の ESLint 関連で必要なパッケージが丸ごとセットになっています。ESLint で頭を抱える心配もありません！

導入と設定は極めて簡単です。まず、以下コマンドで必要なパッケージをインストールします。

ESLint 関連のインストール

# npm
npm install -D eslint @react-native-community/eslint-config

# yarn
yarn add -D eslint @react-native-community/eslint-config

最後に .eslintrc.json に以下のルールを記述するだけで、React Native 関係の開発で必要な ESLint のルールが設定できます！

.eslintrc.json

{
  "extends": "@react-native-community"
}

MEMO

@react-native-community/eslint-config の具体的なルールや導入されている ESLint 関係のパッケージは、以下リポジトリから確認できます！
参考 react-native/index.js at master · facebook/react-nativeGitHub

上級者向け：独自カスタマイズをしたい場合

自身でガッツリ ESLint 周りのルールを構築したい方、ESLint へのこだわりが強い方は、ゼロから ESLint の関連パッケージを導入して設定していきましょう。

私は Prettier と ESLint の競合や非推奨なルールを回避したいため、ESLint 系は自分でカスタマイズをしています。

まず、以下のコマンドを実行して、ESLint 関連のパッケージをインストールしてください。

ESLint 関連のインストール

# npm
npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser \
     eslint-config-prettier eslint-plugin-import \
     eslint-plugin-jsx-a11y eslint-plugin-react \
     eslint-plugin-react-hooks eslint-plugin-react-native

# yarn
yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser \
     eslint-config-prettier eslint-plugin-import \
     eslint-plugin-jsx-a11y eslint-plugin-react \
     eslint-plugin-react-hooks eslint-plugin-react-native

ESLint の設定ファイル .eslintrc.json は以下のように設定します。

.eslintrc.json

{
  "env": {
    "es2021": true,
    "node": true,
    "react-native/react-native": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "plugins": ["react-native"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:react-native/all",
    // 競合避けるため prettier は最後に読み込み
    "prettier"
  ],
  "settings": {
    // eslint-plugin-import
    // 以下拡張子のモジュールのインポートでエラー出ないように設定
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
    "import/ignore": ["react-native"],
    "react-native/style-sheet-object-names": [
      "EStyleSheet",
      "OtherStyleSheet",
      "PStyleSheet"
    ]
  },
  "rules": {
    "react/prop-types": "off",
    // ルール不要のため削除：公式参照
    "import/no-unresolved": "off",
    // import の順番をルール化
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}

基本的には React と　TypeScript で必要な ESLint 関係のパッケージをインストール。加えて、eslint-plugin-react-native を導入しています。

eslint-plugin-react-native のルールは、以下ドキュメントを参考にしてみてください！

参考 Intellicode/eslint-plugin-react-native: React Native plugin for ESLintGitHub

STEP.3：VS Code の設定

最後に、ファイルを保存した時に、コードを自動で整形するように、VS Code の設定を `.vscode/settings.json` に記述します。

コードは以下の通りです。

.vscode/settings.json

{
  // デフォルトフォーマットターは Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時、Prettier で自動フォーマット
  "editor.formatOnSave": true,
  // タブサイズは 2
  "editor.tabSize": 2,
  // ファイル保存時、ESLint で自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": [
    "javascript",
    "typescriptreact",
    "javascript",
    "typescriptreact"
  ]
}

おまけ：ESLint と Prettier のフォーマットスクリプト

ESLint た Prettier によるコード整形をスクリプトで一気に行いたい時は、以下のスクリプトを package.json に登録して、ご活用ください！

package.json

"scripts": {
    "lint:fix": "eslint . --fix --ignore-path .gitignore --ext .js,jsx,.ts,.tsx",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,json}'",
  }

最後に

以上で、React Native(TypeScript) に ESLint と Prettier を導入する方法を紹介しました。

開発体験が非常に良くなるので、ぜひ導入してみてください！

以下の GitHub リポジトリに ESLint と Prettier を設定した React Native(TypeScript) のスターターキット（Expo 使用）を公開しています。ぜひお使いください！
参考 gurutaka/react-native-ts-starter-kitGitHub

スポンサードリンク