ESLint와 Prettier가 예전 설정을 따를 때 문제 해결법

ESLint와 Prettier가 프로젝트에서 예전 설정을 따르면서 코드 포맷팅이나 린트가 제대로 적용되지 않는 경우가 있습니다. 이 문제는 설정 파일 충돌, 캐시 문제, 설정 위치 오류 등 다양한 원인으로 발생할 수 있습니다. 이 글에서는 그 원인과 해결 방법을 단계별로 자세히 설명합니다.

---

목차

• 현상과 원인 파악
• 설정 캐시 재시작
• 설정 파일 위치 및 중복 확인
• ESLint와 Prettier 최신 설정 적용법
• CI/CD 및 빌드 환경 점검
• CLI 옵션 점검

---

현상 및 주요 원인

• 예전 설정이 캐시에 남아 변경 사항 반영 안됨
• 여러 위치에 설정 파일 존재
• plugin:prettier/recommended가 extends 마지막에 위치하지 않음
• 빌드나 CI 환경에서 별도 캐시 사용
• 명령어 옵션에 --no-config 등 부적절한 설정 삽입

---

해결법

1. 캐시 초기화 및 에디터 재시작

• VSCode, 에디터, ESLint/Prettier 확장 프로그램 재시작
• 프로젝트 내 .eslintcache 등 캐시 파일 삭제
• 파일을 다시 저장해 적용되는지 확인

2. 설정 파일 정리

• .eslintrc, prettier.config.js 또는.prettierrc 등 환경설정 파일 위치 확인
• 중복되거나 오래된 설정 파일 제거
• 필요한 설정 파일만 유지하고 명확히 관리

3. VS Code 설정

• VS Code의 settings.json에서 editor.defaultFormatter가 esbenp.prettier-vscode로 설정되어 있는지 확인

4. 확장 프로그램 재설치

• Prettier, ESLint 확장을 제거 후 다시 설치

3. 최신 recommended 설정 사용 및 순서 확인

• .eslintrc에서 plugin:prettier/recommended를 extends 배열 마지막에 위치시키기

{
  "extends": [
    "some-other-config",
    "plugin:prettier/recommended"
  ]
}

• eslint-plugin-prettier, eslint-config-prettier 최신 버전 설치 확인

4. 빌드 도구 및 CI 설정 점검

• 별도로 저장된 캐시 제거 및 빌드 파이프라인 업데이트
• 빌드 전에 eslint --fix와 prettier --write 명령어 실행 확인

eslint --fix
prettier --write

5. CLI 옵션 확인

• 명령어에 --config 옵션을 사용해 특정 설정 강제 적용 여부 점검
• --no-config 옵션으로 설정 무시하는 경우 제거

---

요약

문제 원인	해결 방법
ESLint/Prettier 캐시 문제	에디터 재시작 및 캐시 파일 삭제
설정 파일 중복 및 위치 문제	설정 파일 정리 및 위치 명확화
extends 순서 문제	recommended를 extends 마지막에 배치
빌드 환경 캐시 문제	빌드 캐시 삭제 및 설정 반영 확인
명령어 옵션 문제	CLI 옵션 점검 및 수정

---

Happy GoSu ~

WooGong ))*

\\