Vite + React + TypeScript + TailwindCSSの環境を構築する方法

Webサービスを開発するときはLaravelやNext.jsなどのフレームワークを使うことが多いのですが、フロント開発だけ切り分けたいときにはReact環境を別途立てることがあります。

create-react-app はいつのまにか非推奨になっているようですので、Laravelでも採用されているViteでReact環境を構築して、ついでにTailwindやHuskyなども使えるようにしていきます。

なお、Nodeやnpmはインストールされている前提ですすめていきます。

目指す環境

Vite + React + TypeScript
TailwindCSS
ESLint + Prettier
Husky hook + lint-staged

Vite + React のインストール
TailwindCSSのインストール
Prettierのインストール
Husky と lint-staged のインストール

Vite + React のインストール

コマンドで一発です。簡単ですね。
https://vitejs.dev/guide/#scaffolding-your-first-vite-project

npm create vite@latest

✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript

プロジェクト名などを聞かれるので、frameworkはReact、variantはTypeScriptを選びます。

TailwindCSSのインストール

こちらもマニュアル通りに進めれば簡単です。
https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

Prettierのインストール

ESLintはVite + React をインストールしたときに一緒にインストールされているのでPrettierのみをインストールしていきます。
https://prettier.io/docs/en/install
https://github.com/prettier/eslint-config-prettier#installation

npm install -D prettier eslint-config-prettier

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

.prettierrc.jsonはお好みに合わせて設定してください。

{
  "printWidth": 120,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all",
  "endOfLine": "lf"
}

以上でPrettierが動くようになりました。

npx prettier src/App.tsx --write

↑のコマンドで.prettierrc.jsonの設定通りにファイルが修正されれば成功です。

Husky と lint-staged のインストール

Husky と lint-stagedを一緒に使うことで、コミット前に自動でESLintやPrettierを適用させることができます。Huskyの公式サイトよりもPrettierのサイトにある手順がわかりやすいです。
https://prettier.io/docs/en/install#git-hooks

npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "prepare": "husky install"
  },
  "lint-staged": {
    "src/*.{js,jsx,ts,tsx}": "prettier --write"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

以上です。