React + Vite + TypeScript 자주 쓰는 셋업 정리 (ESLint + Prettier 포함)

프로젝트를 새로 시작할 때마다 리액트 셋업을 반복하는 일이 많다 보니, 이번에 정리해두기로 했다. 항상 쓰는 조합은 React + Vite + TypeScript, 그리고 코드 스타일을 맞추기 위해 ESLint + Prettier까지 같이 설정해둔다. 처음 설정할 때 헷갈렸던 부분이나 자주 쓰는 옵션들도 같이 정리해본다.

1. Vite + React + TypeScript 프로젝트 생성

아래 명령어로 Vite 기반 리액트 프로젝트를 만든다.

npm create vite@latest

입력하면 CLI에서 아래처럼 선택하게 된다.

✔ Project name: » my-app
✔ Select a framework: » React
✔ Select a variant: » TypeScript

프로젝트 생성 후:

cd my-app
npm install

npm run dev로 개발 서버가 잘 뜨는지 확인해보면 된다.

2. 기본 폴더 구조

기본 폴더 구조

my-app/
├─ public/
├─ src/
│  ├─ App.tsx
│  ├─ main.tsx
├─ index.html
├─ tsconfig.json
├─ vite.config.ts
├─ package.json

• main.tsx: 리액트 앱의 진입점
• App.tsx: 화면에 렌더링할 메인 컴포넌트
• tsconfig.json: TypeScript 설정 파일
• vite.config.ts: Vite 설정 파일

3. ESLint + Prettier 설정

코드 스타일과 포맷팅을 자동화하기 위해 ESLint와 Prettier를 같이 설정해준다.

3-1. 필요한 패키지 설치

npm install -D eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

추가로 prettier가 eslint 포맷팅 규칙과 충돌하지 않게 하기 위해 eslint-config-prettier도 포함했다. eslint-plugin-prettier는 Prettier 룰을 ESLint에 연결해주는 역할을 한다.

3-2. .eslintrc 설정

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

ESLint가 타입스크립트 문법과 리액트 문법을 함께 인식하도록 설정했다. `prettier/prettier: error`는 포맷팅 에러가 있으면 ESLint 에러로 표시되게 해준다.

3-3. .prettierrc 설정

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

내가 자주 쓰는 Prettier 포맷 옵션이다. 싱글 쿼트, 세미콜론 유지, 끝에 쉼표 붙이기 등의 취향을 반영했다.

3-4. .eslintignore / .prettierignore

node_modules
dist

불필요한 폴더는 검사 대상에서 제외한다.

4. VSCode에서 자동 포맷 설정

VSCode를 쓴다면 settings.json에 아래 설정을 넣어주면 저장할 때 자동 포맷이 적용된다.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

또는 프로젝트 루트에 .vscode/settings.json으로 저장하면 팀원들과 공유도 가능하다.

5. 마무리

요즘은 프로젝트를 만들 때 거의 이 조합으로 시작하고 있다. Vite는 빠르고 설정이 간단해서 좋고, TypeScript는 타입 체크에 도움 되고, ESLint + Prettier까지 셋업해두면 협업할 때 코드 스타일도 훨씬 깔끔하게 유지된다.

매번 설정하는 게 귀찮아서 이번 기회에 이렇게 포스팅으로 남긴다. 앞으로는 이대로 복붙해서 바로 개발 시작하면 될 듯.