eslint-config-prettier | ESLint indent 규칙과 Prettier 규칙 간의 충돌 해결

 

배경

ESLint와 Prettier는 각각 다른 목적을 가진 도구입니다

 

ESLint는 코드의 품질 검사하고, Prettier는 코드의 스타일 포맷팅을 하죠

하지만 두 도구가 동시에 코드 스타일을 검사하려고 하면서 충돌이 발생했습니다.

 

들여쓰기 스타일 충돌로 문제 발생

 

 

 

문제 정의

문제를 정의하면 다음과 같습니다.

"ESLint의 indent 규칙과 Prettier의 들여쓰기 규칙이 충돌하고 있다"

 

기존에는 ESLint의 indent 규칙을 수동으로 끄는 방식으로 해결했습니다

• https://github.com/woowacourse-teams/2025-moitz/pull/403

 

하지만 이는 임시방편일 뿐, 다음과 같은 문제가 있습니다:

1. 다른 스타일 규칙들도 충돌할 수 있음
2. 충돌이 발생할 때마다 수동으로 규칙을 꺼야 함
3. 팀원들이 규칙을 다시 켤 수 있어 혼란 발생

그래서 다른 해결책을 모색했습니다.

 

 

 

eslint-config-prettier란?

https://github.com/prettier/eslint-config-prettier

https://prettier.io/docs/integrating-with-linters

 

eslint-config-prettier는 Prettier와 충돌할 수 있는 ESLint의 모든 규칙을 자동으로 비활성화하는 도구입니다

 

주요 비활성화 규칙 예시는 아래와 같습니다.

• indent: 들여쓰기 스타일
• quotes: 따옴표 스타일
• max-len: 최대 줄 길이
• semi: 세미콜론 사용

저희는 이중 Indent, 즉 들여쓰기 스타일에서 충돌했었던거죠.

 

 

작동 방식은 아래와 같이 단순합니다.

1. ESLint 설정에 prettier 설정을 추가
2. ESLint가 코드를 검사할 때 스타일 관련 규칙은 무시
3. Prettier가 코드 스타일 포맷팅을 전담

 

사용시의 장점으로는 아래와 같았습니다.

1. 자동으로 모든 스타일 충돌 해결
2. 유지보수 용이
3. 팀 협업 시 혼란 방지
4. 업계 표준 방식 채택

 

 

도입

따라서 저희는 eslint-config-prettier를 도입하기로 했습니다.

과정은 간단합니다.

 

1. eslint-config-prettier 설치

npm install --save-dev eslint-config-prettier

 

 

2. ESLint 설정 파일 수정

1. prettier 설정 import
2. ESLint 설정에 prettier 추가
3. 기존 스타일 관련 규칙 제거

 

 

 

결론

결과적으로 ESLint와 Prettier의 역할을 명확히 분리할 수 있었습니다.

• ESLint: 코드 품질 검사에 집중
• Prettier: 코드 스타일링 전담

 

 

 

관련 PR

https://github.com/woowacourse-teams/2025-moitz/pull/403

https://github.com/woowacourse-teams/2025-moitz/pull/455

 

 

관련 문서

https://github.com/prettier/eslint-config-prettier

https://prettier.io/docs/integrating-with-linters