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

December 14

・react

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

デモ
 GitHubリポジトリ

Technologies/Features

Vite: ^5.0.8
TypeScript: ^5.2.2
React: ^18.2.0
ESLint: ^8.55.0
Prettier: ^3.1.1
Husky: ^8.0.0

Prerequisites

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

導入手順・環境設定

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

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

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

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

cd my-react-app
npm install
npm run dev

URLにアクセスして問題なければ画像のような画面が表示されます。

2. Prettier のインストール

npm i -D prettier

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

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

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

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

3. ESLintの設定

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

npm init @eslint/config

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

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

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

{
  "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 ファイルを作成します。

node_modules
dist
.github

問題なければVSCode上でエラー・警告が表示されます。

4. Husky のインストール

npx husky-init && npm install

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

npm i -D lint-staged

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

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

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

npm test
↓
npm run lint-staged

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

Vercel へデプロイ

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

git push origin <branch-name>

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