ExpoをNativewind+ESlint+Prettier構成で作成する

Expoセットアップ手順

• Expo公式より抜粋

プロジェクト作成

npx create-expo-app {your-project-name}

結果

Creating an Expo project using the default template.

To choose from all available templates (https://github.com/expo/expo/tree/main/templates) pass in the --template arg:
  $ npx create-expo-app --template

To choose from all available examples (https://github.com/expo/examples) pass in the --example arg:
  $ npx create-expo-app --example

✔ Downloaded and extracted project files.
> npm install

開発サーバー起動

• いったん起動確認

cd your-project-name
npx expo start

不要なファイルを削除

npm run reset-project

Nativewindインストール

• Nativewind公式を参考に
• zshだと^が上手く解釈されないので''で囲む

npx expo install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0
npx expo install 'tailwindcss@^3.4.17' 'prettier-plugin-tailwindcss@^0.5.11' -- -D

セットアップ

npx tailwindcss init

結果

Created Tailwind CSS config file: tailwind.config.js

• 作成されたtailwind.config.jsを編集

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

• ルートにglobal.cssを作成

@tailwind base;
@tailwind components;
@tailwind utilities;

Babelのプリセットを設定する

• ルートにbabel.config.jsを作成

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

metro.config.jsの作成と適用

• metro.config.jsを作成

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })

global.cssのインポート

• app/_layout.tsxに下記の記述を追加

import "../global.css";

TypeScriptの型定義セットアップ

• nativewind-env.d.tsを作成

/// <reference types="nativewind/types" />

注意
競合を避けるためnativewind.d.tsやapp.d.tsという名前ではなく、ユニークな名前にすること

Linterの設定

eslint, @eslint/js, globals, typescript-eslint, eslint-plugin-reactの設定をしていく

npx expo lint -- --init

You can also run this command directly using 'npm init @eslint/config@latest'.
Need to install the following packages:
@eslint/create-config@1.9.0
Ok to proceed? (y) y


> your-project-name@1.0.0 npx
> create-config

@eslint/create-config: v1.9.0

✔ What do you want to lint? · javascript
✔ How would you like to use ESLint? · problems
? What type of modules does your project use? … 
❯ JavaScript modules (import/export) esm
? Which framework does your project use? … 
❯ React
✔ Does your project use TypeScript? · yes
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)  a(全てチェックする)
The config that you've selected requires the following dependencies:

eslint, @eslint/js, globals, typescript-eslint, eslint-plugin-react
? Would you like to install them now? › Yes
? Which package manager do you want to use? … npm

PrettierとESlint連携

prettier,eslint-config-prettier,eslint-plugin-prettierのインストールをする

npx expo install prettier eslint-config-prettier eslint-plugin-prettier --dev

• eslint.config.mjsの記述を変更
  warningで.eslintignoreから移行するように言われたのでignoreに移行しました

import js from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import globals from "globals";
import tseslint from "typescript-eslint";

export default [
  {
    ignores: [
      ".expo/", 
      "node_modules/"
    ],
  },

  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], ...js.configs.recommended },
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: {...globals.browser, ...globals.node} } },
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

lint

npx expo lint

vscodeのlint設定

拡張機能を導入

• .vscode/settings.jsonの変更

{
  // ファイル保存時に、デフォルトのフォーマッター（Prettier）を実行する
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時に、コードアクション（自動修正）を実行する
  "editor.codeActionsOnSave": {
    // ESLintのルールに沿って自動修正（importの整理や未使用変数の削除などを含む）
    "source.fixAll.eslint": "explicit",
    "source.sortMembers": "explicit"
  }
}

もし追加パッケージのインストールなどしたい場合

npm install <package-name>の代わりに以下のように使うとExpo側でよしなに依存関係を解決してくr

npx expo install <pakcage-name>

参考