vite react typescript 프로젝트 세팅하기

1. vite 프로젝트 시작하기

npm create vite@latest 제목 -- --template react-ts
// 현재 있는 프로젝트에서 만들고 싶을 때 
npm create vite@latest . -- --template react-ts

2. eslint 설치하기

npx eslint --init

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import prettier from "eslint-config-prettier";
import pluginPrettier from "eslint-plugin-prettier";

export default [
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  pluginReact.configs.flat["jsx-runtime"],
  {
    plugins: {
      "@typescript-eslint": tseslint.plugin,
      "react-hooks": reactHooks,
      prettier: pluginPrettier,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react/react-in-jsx-scope": "off",
      "react/jsx-uses-react": "off",
      "prettier/prettier": "error",
    },
  },
];

eslint.config.js를 수정합니다

기존 설정대로 하면

상단에 import React from 'react'를 적지 않으면 에러가 발생해 수정

React 17 이상부터 적지 않는 걸 권장한다고 한다.

Prettier 관련 설정까지 추가

3. Prettier 설정

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

프로젝트 루트에 .prettierrc 파일을 생성합니다.

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "endOfLine": "auto"
}

pacage.json 수정

"lint": "eslint . --fix && prettier --write ."
"format": "prettier --write ."

4. src/custom.d.ts 선언, src/types/global.d.ts 선언

declare module '*.jpg';
declare module '*.png';
declare module '*.jpeg';
declare module '*.gif';


declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

5. 환경변수 사용 시 설정 파일 생성

.env

src/vite-env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  // 다른 환경 변수들에 대한 타입 정의...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

 

기타 파일 구조

src

- components

    - UI

- service

- util

- hooks

- routes