1. vite react 프로젝트 생성

npm create vite@latest .
npm install
npm run dev

2. tailwind css 설치 및 설정

npm install tailwindcss @tailwindcss/vite

index.css

@import "tailwindcss";

vite.config.ts

import { defineConfig } from 'vite'
// 추가
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    // 추가
    tailwindcss(),
  ],
})

3. alias 설정

npm install -D @types/node

vite.config.ts

import path from "path";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

tsconfig.app.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. ESLint 설치 및 설정

npm install -D eslint@8.57.0 @typescript-eslint/eslint-plugin@8.37.0 @typescript-eslint/parser@8.37.0 eslint-config-airbnb@19.0.4 eslint-plugin-import@2.29.1 eslint-plugin-jsx-a11y@6.7.1 eslint-plugin-react@7.33.2 eslint-plugin-react-hooks@4.6.0

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
);

코드에 안쓰는 변수 생성 후 npm run lint로 테스트

5. Prettier 설치 및 설정

npm install -D prettier eslint-config-prettier eslint-plugin-prettier
npm install -D prettier-plugin-tailwindcss

eslint.config.js에 prettier 적용

    plugins: {
      ...
      prettier: prettierPlugin,
    },
    rules: {
      ...
      'prettier/prettier': 'error',
    },

.prettierrc 생성

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "plugins": [
    "prettier-plugin-tailwindcss"
  ]
}

6. reset css 적용

https://meyerweb.com/eric/tools/css/reset/