🔍 주요 설정 설명

ESLint

1. Extends (규칙 확장)

   • airbnb: JavaScript, React 기본 규칙
   • airbnb/hooks: React Hooks 사용 규칙
   • airbnb-typescript: TypeScript 지원
   • next/core-web-vitals: Next.js 최적화 규칙
   • prettier: Prettier와 충돌 방지

2. 규칙 설정

   'import/order': [
     'error',
     {
       groups: ['builtin', 'external', 'internal'],
       'newlines-between': 'always',
       alphabetize: { order: 'asc' }
     }
   ]
   
   

   • imports 순서 강제: 내장 → 외부 → 내부
   • 그룹 간 빈 줄 필수
   • 알파벳 순 정렬

3. TypeScript 설정

   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json'
   }
   
   

   • TypeScript 파싱 지원
   • tsconfig.json 참조

Prettier

1. 코드 스타일

   printWidth: 80,        // 한 줄 최대 길이
   tabWidth: 2,          // 들여쓰기 간격
   singleQuote: true,    // 작은따옴표 사용
   
   

2. 공백과 괄호

   bracketSpacing: true,  // { foo: bar }
   arrowParens: 'always' // (x) => x
   
   

3. 줄바꿈 설정

   endOfLine: 'auto',     // OS에 따른 줄바꿈
   trailingComma: 'all'   // 후행 쉼표 항상 사용
   
   

⚙️ VSCode 설정 & 자동 포맷팅

1. VSCode 확장 프로그램 설치

• ESLint
• Prettier - Code formatter

2. 워크스페이스 설정

// .vscode/settings.json
{
  // 저장 시 포맷팅
  "editor.formatOnSave": true,

  // Prettier를 기본 포맷터로 설정
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 저장 시 ESLint 자동 수정
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 특정 언어별 포맷터 설정 (선택사항)
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

3. Format On Save 단축키 설정 (선택사항)

1. Cmd + Shift + P (Mac) / Ctrl + Shift + P (Windows)
2. "Keyboard Shortcuts" 검색
3. "Format Document" 검색
4. 원하는 단축키 지정 (기본: Shift + Alt + F)