自分なりのVite x React環境構築テンプレート

概要

• Reactで開発するときに、簡単に環境構築できるように流れも含めてまとめる

導入コマンド

# Reactのインストール
npm create vite@latest

# tsconfigのエラー解消用
npm install -D @types/node
npm install vite-plugin-dts

# tailwindcssを使う場合
npm install -D tailwindcss postcss autoprefixer
npm install tailwind-merge  # クラス名の結合用
npm install class-variance-authority  # バリアントの管理用
npx tailwindcss init -p

tailwindcssの反映

index.css

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

こちらを追記する。場合によっては既存のcssはすべて破棄するとよい。

エイリアスを設定する

エイリアスを設定すると、ファイルを移動してもある種絶対パスで指定することができるので多少変更が楽になる。
さらに細かくプレフィックスを作成しておくと、大きな変更がある場合に楽になるので、components配下などで大別する場合などは設定するとよい。

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,// 型定義ファイルの生成
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
});

tsconfig.app.jsonのエラーの解決とviteのエラーの解決

tsconfig.app.json

{
  "compilerOptions": {
    "incremental": true, /* ファイル差分でコンパイルするようになる */
    /* "composite": true,  ものレポの場合はこっちをつける */
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    /* 自動生成されるものの、エラーが出るので削除する。(拡張機能で対応しているし、、)
       import時にそのライブラリが本当に存在するか探してくれるもの */
    /*"noUncheckedSideEffectImports": true,*/

    /* vite.config.ts のエラー解決 */
    "types": ["node"],
    "baseUrl": "./", /* エイリアスを設定する */
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

tsconfig.node.json

エラー内容はほぼ同じなので省略する。