React 개발을 위한 VS Code 설정

⚙ VS Code 설정

1️⃣ VS Code 설치

Visual Studio Code - Code Editing. Redefined

👉 VS Code 공식 웹사이트에서 본인 운영체제에 맞는 버전을 다운로드하면 된다.

 

2️⃣ 필수 확장 프로그램 설치

VS Code를 열고 왼쪽 사이드바에서 확장(Extensions) 아이콘을 클릭하여 설치할 수 있다.

 

👉 다음 확장 프로그램을 검색하여 설치

• ESLint : 코드 품질 및 스타일 검사
• Prettier - Code formatter : 코드 자동 포맷팅
• ES7+ React/Redux/React-Native snippets : React 관련 코드 스니펫
• Auto Import : 자동 임포트 기능
• Path Intellisense : 파일 경로 자동 완성
• IntelliSense for CSS : CSS 클래스 자동 완성
• CSS Variable Autocomplete : CSS 변수 자동 완성 지원
• Material Icon Theme : 파일 아이콘 테마(선택 사항)
• Thunder Client 또는 REST Client : API 테스트(선택 사항)
• GitLens : Git 통합 강화(선택 사항)
• Error Lens : 인라인 에러 표시(선택 사항)

 

 

 

 

 

 

---

⚙ React 프로젝트 생성

npm create vite@latest my-react-app -- --template react
cd my-react-app
혹은
npm create vite
-> 제시된 순서대로 셋팅
-> 주의! 폴더명 작성하지 않아도 될 경우 ( . )

 

❓ `vite@latest`는 무슨 의미

npm create vite@latest

👉 이렇게 react 프로젝트를 생성할 경우

Vite의 가장 최신 버전으로 프로젝트를 생성한다.

 

만일,

npm create vite

👉 이렇게 버전 명시 없이 설치할 경우

기본적으로 npm이 기억하고 있는 최신 버전으로 프로젝트를 생성한다.

그렇지만, 로컬 캐시나 설정에 따라 완전히 최신은 아닐 수 있다.

 

프로젝트 생성 후 `node_modules` 패키지를 설치하자

npm i
혹은
npm install
(package.json 파일을 기준으로 node_modules 패키지 설치)

 

 

 

 

 

 

 

 

---

⚙ ESLint 및 Prettier 설정

이 두 가지를 설정해서 사용하면

ESLint는 "잘못된 코드"를 잡고,

Prettier는 "예쁜 코드"로 만들어준다.

 

1️⃣ ESLint 파일 설정 (`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 prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

export default [
  { ignores: ['dist'] },
  prettierConfig, // ESLint와 Prettier 충돌 방지
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier: prettier, // Prettier 플러그인 추가
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'prettier/prettier': 'error', // Prettier 규칙 위반 시 에러 표시
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
  },
];

🔍 역할 (더보기 참고)

코드 품질과 일관성을 유지하기 위한 중요한 설정 파일이다.

 

`eslint.config.js`는 ESLint의 새로운 플랫 구성 파일로, 코드 분석 규칙을 정의하고 관리한다.

`eslint.config.js`는 React 19에서 더욱 중요해진 플랫 설정 방식으로,

기존의 .eslintrc 파일을 대체하며 더 명확하고 유연한 설정이 가능

• 코드 오류를 자동으로 감지
• 코드 스타일을 일관되게 유지
• 잠재적 문제를 사전에 발견
• 개발자 간 코드 작성 규칙 통일

 

 

2️⃣ Prettier 파일 생성 후 설정 (`.prettierrc`)

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

🔍 역할 (더보기 참고)

코드 포맷팅을 위한 설정 파일이다.

 

`ESLint`가 코드 품질과 오류를 검사한다면,

`Prettier`는 코드의 스타일과 포맷을 일관되게 유지하는 데 중점

• 코드 포맷팅 자동화: 들여쓰기, 줄 바꿈, 따옴표 스타일 등을 자동으로 정리
• 일관된 코드 스타일 유지: 모든 개발자가 동일한 포맷 규칙을 따르도록 보장
• 코드 리뷰 효율화: 스타일 관련 논쟁을 줄이고 코드 품질에 집중할 수 있게 함

 

 

3️⃣ `eslint-plugin-prettier`와 관련된 필요한 패키지 설치

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

👉 ESLint + Prettier를 함께 쓸 때 충돌 없이 사용할 수 있도록 해준다.

 

 

4️⃣ VS Code Workspace 설정 (`.vscode > settings.json`)

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "package.json": ".gitignore, .prettierignore, .prettierrc, eslint.config.js, package-lock.json, vite.config.js"
  }
}

👉 VS Code 프로젝트 전용 설정

• `Prettier`를 기본 포맷터로 설정
  -> JavaScript 및 React 코드 저장 시 자동으로 포맷팅 (`formatOnSave`)
• 파일 탐색기 정리 (`File Nesting`)
  -> `package.json`아래 관련 설정 파일들(`.prettierrc`, `eslint.config.js` 등)을 그룹으로 정리해 보여줌

 

 

5️⃣ Prettier 무시 파일 생성 (`.prettierignore`)

node_modules
dist
build
.vscode

👉 `Prettier`가 무시할 파일/폴더를 지정하는 설정 파일 (불필요한 포맷팅을 방지하고 속도를 개선함)

 

 

6️⃣ `package.json`에 스크립트 설정 수정

"scripts": {
  "dev": "vite",                                         
  "build": "vite build",                                        
  "lint": "eslint . --config eslint.config.js --fix",           
  "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",   
  "preview": "vite preview"                                     
}

`"lint": "eslint . --config eslint.config.js --fix",` : 전체 코드 ESLint 검사 + 자동 수정

`"format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",` : src 폴더 내 파일 포맷팅

 

 

7️⃣ alias 설정 (`vite.config.js`)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@': path.resolve('./src'),
    },
  },
})

👉 Vite 프로젝트에서 `@`를 `src` 폴더로 바로 연결(별칭)해주는 설정

import 경로를 `@/components/Example` 처럼 간단하게 작성할 수 있음

또한, `.js`, `.jsx`, `.ts`, `.tsx` 파일 확장자도 자동으로 인식하게 해줌

 

 

8️⃣ VS Code 재시작

모든 설정을 완료한 뒤에는 VS Code를 재시작하자.

왜냐하면, 변경된 설정과 확장 기능을 안정적으로 반영하기 위해서!

 

그 다음, ESLint와 Prettier가 정상 작동하는지 확인하면 모든 설정 끝!!

npm run lint

npm run format

 

 

 

#️⃣ 추천 패키지 설치 (필요에 따라)

# 라우팅
npm install react-router-dom

# 상태 관리
npm install zustand
# 또는
npm install @reduxjs/toolkit react-redux

# UI 라이브러리
npm install @mui/material @emotion/react @emotion/styled
# 또는
npm install styled-components
# 또는
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 폼 관리
npm install react-hook-form
# 또는
npm install formik yup

# API 호출
npm install axios
# 또는
npm install @tanstack/react-query
npm install @tanstack/react-query-devtools