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

# Expoセットアップ手順
- [Expo公式](https://expo.dev/)より抜粋
## プロジェクト作成
```bash
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
```
## 開発サーバー起動
- いったん起動確認
```bash
cd your-project-name
npx expo start
```

## 不要なファイルを削除
```bash
npm run reset-project
```

## Nativewindインストール
- [Nativewind](https://www.nativewind.dev/)公式を参考に
- zshだと`^`が上手く解釈されないので`''`で囲む
```bash
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
```

## セットアップ
```bash
npx tailwindcss init
```
結果
```
Created Tailwind CSS config file: tailwind.config.js
```
- 作成された`tailwind.config.js`を編集
```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`を作成
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## Babelのプリセットを設定する
- ルートに`babel.config.js`を作成
```js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};
```
## metro.config.jsの作成と適用
- `metro.config.js`を作成
```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に下記の記述を追加
```tsx
import "../global.css";
```

### TypeScriptの型定義セットアップ
- `nativewind-env.d.ts`を作成
```ts
/// <reference types="nativewind/types" />
```
:::note warn
注意
競合を避けるため`nativewind.d.ts`や`app.d.ts`という名前ではなく、ユニークな名前にすること
:::

# Linterの設定
`eslint`, `@eslint/js`, `globals`, `typescript-eslint`, `eslint-plugin-react`の設定をしていく
```bash
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`のインストールをする
```bash
npx expo install prettier eslint-config-prettier eslint-plugin-prettier --dev
```
- `eslint.config.mjs`の記述を変更
warningで`.eslintignore`から移行するように言われたので`ignore`に移行しました
```js
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
```shell
npx expo lint
```

## vscodeのlint設定
拡張機能を導入

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

- .vscode/settings.jsonの変更
```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
```bash
npx expo install <pakcage-name>
```
## 参考
https://docs.expo.dev/get-started/start-developing/

https://www.nativewind.dev/docs/getting-started/installation

https://docs.expo.dev/guides/using-eslint/