ESLint와 Prettier 충돌 방지 설정

Published at 2025-03-18

ESLint와 Prettier 충돌 방지 설정

날짜: 2025년 3월 18일

eslint-config-prettier

→ ESLint와 Prettier를 함께 사용할 때 충돌을 방지하는 설정 패키지

🚀 주요 기능

• ESLint와 Prettier 간의 충돌 해결
  • ESLint의 일부 코드 스타일 관련 규칙이 Prettier와 충돌할 수 있음
  • eslint-config-prettier는 이러한 충돌을 자동으로 비활성화하여 문제 해결
• Prettier의 코드 스타일 유지
  • Prettier는 코드 포맷팅을 담당하고, ESLint는 코드 품질을 검증
  • 두 도구의 역할을 명확히 분리하여 생산성 향상

🔧 설정 방법 (.eslintrc.json)

• extends 배열의 마지막에 “prettier”를 추가합니다.

  {
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier"
    ]
  }

⚠️ 반드시 마지막에 추가해야 함 → 그래야 다른 규칙들이 Prettier에 의해 덮어씌워지는 것을 방지 가능

🎯 결론

eslint-config-prettier는 ESLint와 Prettier 간의 충돌을 방지하는 필수 설정입니다.

• Prettier와 ESLint를 같이 사용할 때 반드시 추가하는 것이 좋음
• eslint-plugin-prettier와 함께 사용하면 Prettier 규칙을 ESLint에서 직접 검사 가능
• 설정 시 “extends”: [“prettier”]를 마지막에 추가해야 함

eslint-plugin-prettier

→ ESLint 플러그인으로, Prettier를 ESLint의 규칙으로 추가하여 코드 스타일을 검사

🚀 주요 기능

✅ Prettier를 ESLint 규칙처럼 실행

✅ Prettier와 맞지 않는 코드 스타일을 ESLint 오류로 감지

✅ ESLint에서 Prettier를 실행해 한 번에 코드 포맷팅 적용 가능 (—fix)