@remember-web/eslint-config

Remember 프로젝트 ESLint 설정

설치

기본 설치

yarn add -D @remember-web/eslint-config

Yarn PnP 프로젝트 추가 설정

Yarn PnP(Plug'n'Play)를 사용하는 프로젝트에서는 TypeScript ESLint 의존성을 추가로 설치해야 합니다:

# Yarn PnP 프로젝트에서 필수 추가 설치
yarn add -D typescript-eslint @typescript-eslint/types @typescript-eslint/type-utils

Yarn PnP 프로젝트 확인 방법:

• 프로젝트 루트에 .pnp.cjs 파일이 있으면 Yarn PnP 사용 중
• yarn --version이 4.x 이상이고 .yarnrc.yml에서 nodeLinker: pnp 설정이 있으면 PnP 사용 중

마이그레이션 가이드

1. 현재 상태 확인

먼저 프로젝트의 현재 ESLint 설정을 확인하세요:

# 현재 사용 중인 ESLint 버전 확인
yarn list eslint

# 현재 설정 파일 확인
ls -la | grep eslint
# .eslintrc.js, .eslintrc.json, .eslintignore 등이 있는지 확인

2. 기존 패키지 제거

현재 설치된 ESLint 관련 패키지들을 제거하세요:

# 기존 ESLint config들 제거
yarn remove eslint-config-airbnb
yarn remove eslint-config-airbnb-typescript  
yarn remove eslint-config-react-app
yarn remove eslint-config-prettier

# 기존 ESLint 플러그인들 제거
yarn remove eslint-plugin-react
yarn remove eslint-plugin-react-hooks
yarn remove eslint-plugin-import
yarn remove eslint-plugin-jsx-a11y
yarn remove @typescript-eslint/eslint-plugin
yarn remove @typescript-eslint/parser

# Next.js 관련 (사용하는 경우만)
yarn remove @next/eslint-config-next
yarn remove eslint-config-next

3. ESLint 버전 업데이트

# ESLint 9.3+ 설치
yarn add -D eslint

# 새로운 config 설치
yarn add -D @remember-web/eslint-config

4. 기존 설정 파일 제거

# 기존 설정 파일들 삭제
rm .eslintrc.js
rm .eslintrc.json
rm .eslintignore

# 또는 한번에
rm .eslintrc.* .eslintignore

5. 새로운 설정 파일 생성

프로젝트 루트에 eslint.config.mjs 파일을 생성하세요:

React + TypeScript 프로젝트

// eslint.config.mjs
import config from '@remember-web/eslint-config';

export default [
  {
    ignores: [
      'node_modules/**',
      'build/**',
      'dist/**', 
      'public/**',
      '*.min.js'
    ],
  },
  ...config.configs.react,
  ...config.configs.typescript
];

Next.js 프로젝트

// eslint.config.mjs
import config from '@remember-web/eslint-config';

export default [
  {
    ignores: [
      'node_modules/**',
      '.next/**',
      'out/**',
      'build/**',
      'public/**'
    ],
  },
  ...config.configs.react,
  ...config.configs.typescript,
  ...config.configs.next
];

6. 설정 테스트

# 설정이 제대로 적용되는지 확인
yarn eslint --version
yarn eslint src/ --max-warnings 0

# 자동 수정 실행
yarn eslint src/ --fix

7. package.json 스크립트 업데이트

{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix"
  }
}

마이그레이션 전후 비교

Before (.eslintrc.js)

module.exports = {
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'prettier'
  ],
  plugins: ['react', '@typescript-eslint', 'import'],
  rules: {
    // 많은 커스텀 규칙들...
  },
  parserOptions: {
    project: './tsconfig.json'
  }
};

After (eslint.config.mjs)

import config from '@remember-web/eslint-config';

export default [
  {
    ignores: ['node_modules/**', 'build/**', 'dist/**'],
  },
  ...config.configs.react,
  ...config.configs.typescript
];

자주 발생하는 문제

"Cannot resolve configuration" 에러

# Node.js 버전이 18+ 인지 확인
node --version

# 캐시 삭제 후 재설치
rm -rf node_modules yarn.lock
yarn install

"Parsing error" 발생시

// eslint.config.mjs에 TypeScript parser 설정 확인
export default [
  // ... 기존 설정
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parserOptions: {
        project: './tsconfig.json'
      }
    }
  }
];

기존 커스텀 규칙 유지하기

// eslint.config.mjs
import config from '@remember-web/eslint-config';

export default [
  ...config.configs.react,
  ...config.configs.typescript,
  
  // 프로젝트별 커스텀 규칙
  {
    files: ['src/**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': 'warn',
      'prefer-const': 'error',
      // 기존에 사용하던 규칙들 추가
    }
  }
];

설정 옵션

기본 구성

| 설정 | 설명 | 사용 시점 | |------|------|-----------| | react | React 관련 규칙 | React 프로젝트 필수 | | typescript | TypeScript 규칙 | TypeScript 사용시 필수 | | next | Next.js 규칙 | Next.js 프로젝트 | | fsd | FSD 아키텍처 강제 | FSD 패턴 사용시 | | reactCompiler | React Compiler 최적화 | React 19+ |

추가 설정 예시

// 모든 기능 사용
import config from '@remember-web/eslint-config';

export default [
  {
    ignores: ['node_modules/**', 'build/**'],
  },
  ...config.configs.react,
  ...config.configs.typescript,
  ...config.configs.next,
  ...config.configs.fsd,
  ...config.configs.reactCompiler,
  
  // 테스트 파일별 규칙
  {
    files: ['**/*.test.{js,jsx,ts,tsx}'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off'
    }
  }
];