
今回は、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_modules
や expo-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 lint
やnpm run format
コマンドで簡単にコード品質と整形が管理できるようになります。Lintとフォーマットが統一されることで、プロジェクト全体のコーディングスタイルが一貫し、チーム開発でも可読性と保守性の高いコードが保たれます。