簡単にできる!React Native + ExpoでESLintとPrettierを設定してコードの一貫性を保つ方法

ウェブ制作
はる
はる

今回は、npx create-expo-app でReact Native + Expoプロジェクトを作成し、npm run reset-project で環境を整えた状態からスタートし、コードの品質を保つためのESLintとコード整形ツールPrettierの設定方法について説明します。これにより、コードの一貫性が向上し、可読性や保守性の高い開発環境が整います。

ESLintのインストールと基本設定

まず、ESLintをインストールして基本設定を行います。Expoでは、npx expo lint コマンドを使用して簡単にセットアップが可能です。このコマンドを実行すると、ESLintがプロジェクトにインストールされ、設定ファイルが生成されます。途中で「No ESLint config found. Install and configure ESLint in this project?」と表示された場合は、「yes」を選択してください。これにより、Expo専用の設定が適用されたESLintが導入されます。

インストールと設定が完了すると、npx eslint . コマンドでプロジェクト全体に対するLintチェックが実行できるようになります。この設定により、JavaScriptやReact Nativeのコードにおける構文エラーやコーディングルール違反を簡単に検出できます。

Prettierのインストールと統合

次に、コードのフォーマットを自動で統一するためのPrettierをインストールし、ESLintとの統合を行います。以下のコマンドを使用してPrettierとその関連パッケージをインストールします。

npx expo install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
  • prettier: コード整形を自動で行い、統一感を保ちます。
  • eslint-config-prettier: Prettierの設定がESLintのルールと競合しないよう調整します。
  • eslint-plugin-prettier: PrettierのルールをESLint内でチェックできるようにするプラグインです。

インストール後、プロジェクトの .eslintrc.js ファイルに以下の設定を追加します。

.eslintrc.js

module.exports = {
  extends: ["universe", "plugin:prettier/recommended"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

この設定により、Prettierがフォーマットしたルールに従っていないコードがエラーとしてESLintで検出されます。これにより、コードスタイルの一貫性が強化され、保守性の高いコードを維持できます。

ignoreファイルの設定

Lintやフォーマットの対象から外すファイルやディレクトリを .eslintignore.prettierignore で設定しておくと、不要なファイルが処理されることを防げます。特に、node_modulesexpo-env.d.ts のようなファイルはignore設定を行うと良いでしょう。

.eslintignore

node_modules
dist
.expo
expo-env.d.ts

.prettierignore

node_modules
dist
.expo
expo-env.d.ts

これで、無駄なチェックが省略され、必要なコードだけに対してESLintとPrettierが適用されるようになります。

整形コマンドの追加と実行

コード整形を効率化するため、package.json に整形用のスクリプトを追加します。これにより、コマンド一つでプロジェクト全体を自動整形できるようになります。

package.json

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}
  • lint: npm run lint でコードに対してESLintのチェックを実行します。
  • format: npm run format でPrettierによるコード整形が一括で実行され、統一されたフォーマットが適用されます。

Prettierの拡張機能でインポートのソートを追加

インポートを整理するためのPrettierプラグインも入れておくとさらに綺麗になるので入れます。

インストール

npm install --save-dev @trivago/prettier-plugin-sort-imports

公式ドキュメント:https://github.com/trivago/prettier-plugin-sort-imports

インポートの順序を整理する設定を追加します。

{
  // 省略 (ここのコメントアウトは入れないでください)
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^react(/.*)?$",
    "^react-native$",
    "^expo(-.*)?$", 
    "<THIRD_PARTY_MODULES>",
    "^types$",
    "^@/components/(.*)$",
    "^@/hooks/(.*)$",
    "^@/assets/(.*)$",
    "^[./]",
    "^import\\s+type"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "importOrderCombineTypeAndValueImports": false
}
  • importOrder: これは自分のプロジェクトに合わせて並び順をカスタマイズする部分
  • importOrderSeparation: 各インポートグループ間に空行を追加
  • importOrderSortSpecifiers: 各インポート内の指定子をアルファベット順にソート
  • importOrderCombineTypeAndValueImports: importとimport typeを分けて整理

まとめ

これで、Expo環境でのESLintとPrettierのセットアップが完了しました。設定後は、npm run lintnpm run formatコマンドで簡単にコード品質と整形が管理できるようになります。Lintとフォーマットが統一されることで、プロジェクト全体のコーディングスタイルが一貫し、チーム開発でも可読性と保守性の高いコードが保たれます。

参考ドキュメント

Use ESLint and Prettier
A guide on configuring ESLint and Prettier to format Expo apps.
タイトルとURLをコピーしました