Angular + pnpm 환경에서 ESLint 다운그레이드 및 최신 Lint 설정 실전 가이드

키워드: Angular, pnpm, ESLint 다운그레이드, lint 설정, e2e, TSLint 제거, 연쇄적 문제 해결, 실전 자동화

---

들어가며

실전 프로젝트에서 Angular와 pnpm을 함께 쓰다 보면, ESLint 버전 호환 문제나 lint 설정 오류로 빌드/배포가 막히는 경우가 많습니다.
오늘은 실제로 겪은 ESLint 9.x → 8.x 다운그레이드, Angular lint 설정 최신화, e2e TSLint 완전 제거 과정을 연쇄적 사고로 정리합니다.

---

1. 문제 상황

• Angular 18 + pnpm 환경에서 ESLint 9.x 사용 시, 일부 플러그인/설정과 호환성 문제 발생
• ng lint 실행 시 아래와 같은 오류가 반복됨

  Error: Schema validation failed with the following errors:
    Data path "" must have required property 'lintFilePatterns'.

• e2e(통합 테스트) 관련 TSLint 설정이 남아있어, 빌드/테스트 시 불필요한 오류 발생

---

2. 연쇄적 사고로 문제 해결

2-1. ESLint 다운그레이드

• package.json, functions/package.json에서 "eslint": "^8.57.0"으로 버전 명시
• pnpm 환경에서는 반드시 pnpm install로 의존성 재설치
• peer dependency 충돌 시 pnpm install --legacy-peer-deps 활용

2-2. Angular lint 설정 최신화

• angular.json의 lint 옵션에서 tsConfig, exclude 제거
• lintFilePatterns만 남기고, 최신 @angular-eslint 방식으로 변경
• e2e lint(tslint) 설정 완전 삭제

// angular.json 예시
"lint": {
  "builder": "@angular-eslint/builder:lint",
  "options": {
    "lintFilePatterns": [
      "src/**/*.ts",
      "src/**/*.html"
    ]
  }
}

2-3. 린트 오류 연쇄적 해결

• 빈 라이프사이클 메서드 삭제/수정
• ngAfterViewInit 등 인터페이스 미구현 경고 해결
• pnpm lint --fix 및 수동 코드 수정

---

3. 실전 팁 & 회고

• lint 설정 오류는 공식 문서와 실제 에러 메시지를 꼼꼼히 비교하며, diff 기반으로 최소한만 수정하는 것이 안전
• pnpm은 npm/yarn과 다르게 peer dependency 처리 방식이 까다로우니, 충돌 시 옵션을 적극 활용

---

마치며

이 글은 실제 Angular + pnpm 프로젝트에서 겪은 lint 설정 문제와 해결 과정을 바탕으로 작성되었습니다.
비슷한 문제로 고생하는 개발자분들께 도움이 되길 바랍니다.