React Native Expoで、VS Code, ESLint, Prettierを使って静的解析と自動整形をする方法

React Native Expoの開発をする際、VS Code, ESLint, Prettierを使って静的解析と整形を自動実行する方法を説明します。ESLintとPrettierには、React Native Expoが公式で対応済みのため、信頼性があるし導入も簡単です。

VS Code拡張機能のインストール

以下の拡張をインストールします。

• Prettier - Code formatter
• ESLint

ESLint, Prettierをインストール

yarn add -D "eslint@^8.57.1"
yarn add -D "eslint-config-expo@^7.0.0"
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

ESLintの設定ファイル

.eslintrc.js

ファイル名を.eslintrc.jsとして、以下の内容を書いてプロジェクトのルート直下に配置します。

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

package.json

ESLintによる静的解析を全ファイルにかけるコマンドをpackage.jsonに追加します。VS Code上では、開いているファイルにしかESLintが実行されないため、ビルド前などに便利なコマンドです。

{
  "scripts": {
    "lint": "expo lint"
  },
}

Prettierの設定ファイル

VS Code settings.jsonの修正

VSCodeのsettings.jsonに以下を追加します。保存時に自動でPrettierが動いてフォーマットされます。

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    }
  },

必要に応じて、対応したい拡張子の設定を同様に追加します。

• TypeScript *.ts -> [typescript]
• TypeScript *.tsx -> [typescriptreact]
• JavaScript *.js -> [javascript]
• JavaScript *.jsx -> [javascriptreact]