【最新版】Expo（React Native）にESLintとPrettierを導入する方法

自分のプロジェクトでExpoを使ってアプリ開発をする際に行なった、ESLintとPrettierの導入の手順を備忘録も含め残しておきます。

（とはいえ、ほぼほぼExpoの公式Docに従った感じですが。）

全体的な流れ

まずは全体的流れです。
以下の４ステップでできます。

1. パッケージのインストール
2. 既存ファイルの修正
3. .prettierrc作成
4. （オプショナル）TypeScriptへの対応

それぞれ簡単に解説していきます。

1. パッケージのインストール

今回はeslint-config-universeを使います。
ので、それをまずはインポート。

yarn add --dev eslint-config-universe

もしeslintやprettierのパッケージ等をまだインストールしていない場合は以下も併せてインストールします。

yarn add --dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

2. 既存ファイルの修正

インストールしたeslint-config-universeの設定をpackage.jsonと.eslint.*にインポートします。

package.json

{
  "eslintConfig": {
    "extends": "universe"
  }
}

.eslint.js

module.exports = {
  extends: 'universe',
};

extendsの設定値

extendsに指定できるのは上記のuniverse以外にもいくつかあります。

• universe/native: Expoを含むReactNativeのプロジェクト用の設定
• universe/web: Webブラウザで実行されるコード用の設定
• universe/node: Nodeで実行されるコード用の設定

ちなみに、universeは特定の設定がない場合のプロジェクトに用いるためのベーシックな設定となります。

3. .prettierrc作成

Prettierの設定カスタマイズのための.prettierrcを作成します。
デフォルトからカスタマイズしない場合はスキップしてOKです。

以下のような感じで、お好みで.prettierrcを設定してください。

.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true,
  "trailingComma": "es5"
}

4. （オプショナル）TypeScriptへの対応

TypeScriptを導入している場合は、以下の設定もしておきましょう。

.eslint.js

module.exports = {
  extends: [
    'universe',
+   'universe/shared/typescript-analysis',
  ],
+ overrides: [
+   {
+     files: [
+       '*.ts',
+       '*.tsx',
+       '*.d.ts'
+     ],
+     parserOptions: {
+       project: './tsconfig.json'
+     },
+   },
+ ],
};

まとめ

非常に楽にESLintとPrettierを導入できる。

ESLintの設定等いろいろ変更できるが、それが面倒な人やあまりわからないなど特にこだわりがなければこれで良さそう。

参照