
React + Vite + TypeScript の環境構築の手順です。デプロイ先は Vercel です。  
ESLint, Prettier, Husky も導入します。

[デモ](https://react-vite-boilerplate-eight.vercel.app/)  
[GitHubリポジトリ](https://github.com/chocolat5/react-vite-boilerplate)

## Technologies/Features

- [Vite](https://vitejs.dev/): ^5.0.8
- [TypeScript](https://www.typescriptlang.org/): ^5.2.2
- [React](https://react.dev/): ^18.2.0
- [ESLint](https://eslint.org/): ^8.55.0
- [Prettier](https://prettier.io/): ^3.1.1
- [Husky](https://typicode.github.io/husky/): ^8.0.0

## Prerequisites

- Git
- Node.js (Vite requires Node.js version 18+. 20+)

## 導入手順・環境設定

### 1. Vite プロジェクトの作成

```bash
npm create vite@latest my-react-app --template react-ts
```

画面の表示に従って適当なものを選択して進めます。

一旦動作するか確認します。

```bash
cd my-react-app
npm install
npm run dev
```

URLにアクセスして問題なければ画像のような画面が表示されます。
![](./react-vite-boilerplate-1.png)

### 2. Prettier のインストール

```bash
npm i -D prettier
```

`.prettierrc` ファイルを作成します。基本に必要なものを追加しました。

```json
{
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "useTabs": true,
  "printWidth": 80
}
```

`.prettierignore` ファイルを作成します。

```json
**/.git
**/.svn
**/.hg
**/node_modules
build
dist
public
```

### 3. ESLintの設定

ESLintはプロジェクト作成時にインストールされているので初期化します。
`.eslintrc.json` ファイルが作成されます。

```bash
npm init @eslint/config
```

必要なプラグイン類をインストールします。

```json
npm i -D eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
```

デフォルトの記述に必要なものを追加しました。

```json
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "airbnb",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb-typescript",
    "plugin:import/typescript",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json",
    "extraFileExtensions": [".md", ".json"]
  },
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "prettier",
    "import"
  ],
  "rules": {
    "semi": [2, "always"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/triple-slash-reference": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "ignorePatterns": ["vite.config.ts"],
  "root": true
}
```

`.eslintignore` ファイルを作成します。

```json
node_modules
dist
.github
```

問題なければVSCode上でエラー・警告が表示されます。
![](./react-vite-boilerplate-2.png)

### 4. Husky のインストール

```bash
npx husky-init && npm install
```

lint-staged をインストールします。

```bash
npm i -D lint-staged
```

`.huskyrc` ファイルを作成します。

```json
{
  "hooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}
```

`.husky` フォルダ内の `pre-commit` ファイルの一部を書き換えます。

```bash
npm test
↓
npm run lint-staged
```

正しく設定ができていれば、lint エラーがあるままでコミットしようとすると失敗します。

## Vercel へデプロイ

1. 先ほどの作業を GitHub のリポジトリに push します。

```bash
git push origin <branch-name>
```

2. [Vercelhttps://vercel.com/](https://vercel.com/) にログインします。
3. 「Add New Project」をクリックして、リポジトリを選択したら「import」します。
4. 設定は何も変えずにデプロイします。
5. デプロイが完了してサイトが表示されるかURLにアクセスして確認します。

[デモ](https://react-vite-boilerplate-eight.vercel.app/)  
[GitHubリポジトリ](https://github.com/chocolat5/react-vite-boilerplate)

## 参照

- Getting Started | Vite [https://vitejs.dev/guide/](https://vitejs.dev/guide/) （2023-12-13参照）
- Configuration File · Prettier [https://prettier.io/docs/en/configuration](https://prettier.io/docs/en/configuration) （2023-12-13参照）
- huskyを利用してgit hooksを作る [https://zenn.dev/ianchen0419/articles/a70d181de74df0](https://zenn.dev/ianchen0419/articles/a70d181de74df0) （2023-12-13参照）


Vite + React + TypeScript (ESLint + Prettier + Husky) + Vercel 開発環境

Tags