ESLint와 Prettier, 왜 둘 다 쓰는 걸까요?

요즘 개발 환경은 단순히 코드를 잘 다룬다고 해서 끝나지 않습니다. 협업 인원이 늘어나고 프로젝트 규모가 커질수록, 코드의 일관성과 품질을 어떻게 유지할 것인지가 개발 속도와 직결되기 때문입니다. 

이러한 상황에서 코드의 스타일과 기준을 하나의 규칙으로 정리하기 위해, 개발자들의 주목을 받는 도구가 있습니다. 바로 ‘ESLin’t와 ‘Prettier’입니다.

코드의 기준을 정하고 통일감을 만들어 코드 리뷰와 유지보수 과정을 훨씬 수월하게 해주는 도구로, 규모가 큰 프로젝트를 진행할수록 찾게되는 두 개발 도구는 각각 어떤 특성을 가지고 있을까요? 활용법까지  함께 알아보겠습니다.

ESLint란 무엇인가요?

ESLint는 JavaScript 및 TypeScript 코드에서 문법 오류나 잠재적인 문제를 사전에 찾아내고, 코드 품질을 일정한 기준으로 유지할 수 있도록 도와주는 정적 분석 도구입니다. 코드를 실행하지 않고도 작성 단계에서 문제를 감지할 수 있어, 개발 과정 전반에서 안정성을 높이는 역할을 합니다. 

코드를 실행하지 않아도, 작성된 코드 구조를 분석해 잠재적인 문제를 사전에 판단해 사용하지 않는 변수, 잘못된 조건문, 의도치 않은 전역 변수 사용처럼 실행 중에 문제가 될 수 있는 코드 패턴을 미리 찾아낼 수 있습니다.

덕분에 개발자는 디버깅에 시간을 쓰기보다, 처음부터 안정적인 코드를 작성하는 데 집중할 수 있습니다.

팀의 코드 기준을 규칙으로 만드는 ESLint

프로젝트에 여러 명의 개발자가 참여하면, 코드 작성 방식은 자연스럽게 달라질 수밖에 없습니다. 

ESLint는 설정 파일을 통한 규칙 정의와 자동 검사, 그리고 개발 과정 전반에 걸친 일관된 적용을 통해 이러한 차이를 규칙으로 정리해, 팀 전체가 동일한 기준으로 코드를 작성하도록 돕습니다. 

덕분에 코드 리뷰에서 반복적으로 지적되던 문제들이 사전에 정리되어 리뷰어는 기본적인 오류나 규칙 위반을 확인하는 대신, 로직과 구조에 더 집중할 수 있게 됩니다. 

그 결과 코드 리뷰 시간은 줄어들고, 커뮤니케이션 과정도 훨씬 단순해집니다.

Prettier란 무엇인가요?

Prettier는 코드의 형태와 스타일을 자동으로 정리해주는 코드 포맷터입니다. 들여쓰기, 줄바꿈, 따옴표, 세미콜론처럼 코드의 가독성과 관련된 요소들을 자동으로 정리해, 개발자가 어떤 스타일을 선호하든 프로젝트 전체의 코드를 동일한 형태로 맞춰줍니다.

코드 스타일을 자동으로 맞추는 Prettier

팀 개발 환경에서는 코드 스타일을 두고 사소한 의견 차이가 반복되기 쉽습니다. 프로젝트 규모가 커지고 참여 인원이 늘어날수록, 이러한 스타일을 사람의 손으로 관리하는 것은 현실적으로 어렵습니다.

Prettier는 자동 포맷팅을 통해 코드의 형태와 스타일을 일관되게 정리해, 신규 인원이 투입되더라도 동일한 코드 스타일을 즉시 유지할 수 있도록 돕습니다.

이로 인해 코드 리뷰에서는 들여쓰기나 줄 간격 같은 스타일 관련 지적이 거의 사라지고, 리뷰어는 코드의 내용과 구조에 더 집중할 수 있게 됩니다. 

그 결과 리뷰 품질은 높아지고 불필요한 커뮤니케이션과 논쟁도 자연스럽게 줄어들어, 장기적인 유지보수를 고려하는 프로젝트에서 Prettier를 선호하는 개발자들이 점점 많아지고 있습니다.

한 번 정리하면 계속 쓰게 되는 Prettier JSON 사용법 보러가기

프로젝트 규모가 커질수록 

ESLint와 Prettier를 함께 사용하는 이유

팀 프로젝트로 개발을 진행할 때는 포맷을 통일하는 일과 코드의 위험 신호를 잡는 일이 서로 다른 영역으로 다뤄집니다. 이러한 이유로 ESLint와 Prettier를 함께 사용하는 개발자들이 점점 많아지고 있습니다.

Prettier는 포맷을 자동 적용하는 역할로, ESLint는 규칙 위반을 경고나 에러로 잡아주는 역할로 나눠 운영하면 사람마다 다른 코딩 습관이 들어와도 팀의 기준이 흔들리지 않고, 코드 리뷰와 유지보수 과정도 훨씬 매끄럽게 이어집니다.

• Prettier가 담당하는 것

Prettier는 들여쓰기 · 줄바꿈 · 따옴표 같은 표현 방식을 자동으로 맞춰 코드의 형태를 빠르게 통일해주지만, 코드가 문법적으로는 정상 동작하더라도 나중에 문제가 될 수 있는 패턴까지 판단해 주지는 않습니다. 

• ESLint가 담당하는 것

사용하지 않는 변수, 잘못된 조건 처리, 의도치 않은 전역 변수처럼 버그로 이어질 수 있는 패턴을 규칙으로 정의해 사전에 걸러줍니다.

Prettier가 가진 한계를 ESLint가 보완해주기 때문에, 두 도구를 함께 활용하면 보다 안정적인 개발 결과를 만들 수 있습니다.

이러한 역할 분담 덕분에 코드 리뷰 과정에서는 스타일과 관련된 논쟁이 줄어들고, 리뷰어는 로직 · 구조 · 안정성처럼 더 중요한 부분에 집중할 수 있게 됩니다.

* ESLint와 Prettier의 역할, 한눈에 보세요.

앞서 살펴본 것처럼 ESLint와 Prettier는 모두 개발 환경을 정리해주는 도구이지만, 사용하는 지점과 역할은 분명하게 다릅니다. 차이를 이해하기 쉽게 아래 표로 각각의 역할을 정리해 보았습니다.

ESLint · Prettier 세팅, 이렇게 하시면 됩니다

ESLint와 Prettier를 함께 사용할 때 가장 중요한 기준은 역할을 명확히 나누는 것입니다. 코드 포맷은 Prettier가 담당하고, 코드 규칙과 위험 신호는 ESLint가 담당하도록 구성하는 것이 실무에서 가장 안정적인 방식입니다.

참고로 코드 예시는 VS Code 기준으로 설명했습니다. 다만 ESLint와 Prettier의 핵심 설정은 에디터와 무관하게 프로젝트 공용으로 적용할 수 있습니다.

1. 프로젝트 공용 패키지로 설치합니다

팀 프로젝트에서는 개인 에디터 설정이 아니라, 프로젝트에 직접 설치해 공통 기준으로 관리하는 편이 좋습니다.

• eslint-config-prettier는 ESLint의 포맷 관련 규칙을 꺼서 Prettier와의 충돌을 방지합니다.

• eslint-plugin-prettier는 Prettier 결과를 ESLint 경고나 에러로 표시할 수 있게 도와줍니다.

   

2. ESLint 설정에 Prettier를 함께 연결합니다

ESLint 설정 파일에서는 Prettier를 권장 조합으로만 연결해 두면 충분합니다.

이렇게 설정하면 포맷 관련 규칙은 Prettier가 전담하고, ESLint는 코드 품질과 안전성 규칙에 집중하게 됩니다.
 

3. Prettier는 코드 스타일만 담당하도록 설정합니다

Prettier 설정은 복잡할 필요 없이, 팀에서 합의한 최소 기준만 담는 것이 좋습니다.

이 설정은 코드의 모양을 통일하는 데만 관여하며, 코드의 동작이나 로직에는 영향을 주지 않습니다.

4. 저장 시 자동 적용은 에디터에서 처리합니다

실무에서는 저장 시 자동 정리가 가장 많이 사용됩니다. VS Code 기준으로는 아래 정도면 충분합니다.

저장 시 Prettier가 코드 포맷을 정리하고, ESLint는 자동 수정 가능한 규칙 위반만 정리합니다.  이렇게 두면 두 도구가 서로 역할을 침범하지 않습니다.
 

5. 팀 프로젝트에서는 적용 시점을 분리합니다

실무에서는 보통 아래와 같이 나눠 운영합니다.

• 작성 · 저장 시: Prettier로 코드 포맷 자동 정리
• 커밋 · PR 단계: ESLint로 규칙 위반 여부 검사
• CI 단계: ESLint 통과 여부를 기준으로 머지 판단

이 구조를 가져가면 코드 스타일과 품질을 모두 자동화하면서도, 개발 흐름을 방해하지 않습니다.

ESLint · Prettier,

프로젝트 유형에 따라 달라지는 적용 기준

ESLint와 Prettier는 규모가 작은 개인 프로젝트에서의 최적화와, 여러 명이 동시에 작업하는 서비스 개발에서의 최적화는 목표가 다르기 때문에 프로젝트 성격에 따라 적용 범위를 다르게 가져가야 합니다.

그래서 팀에서는 ‘어떤 규칙을 얼마나 강하게 적용할지’, ‘어떤 단계에서 자동으로 강제할지’를 프로젝트 유형에 맞춰 정리해 두면 운영이 훨씬 편해집니다.

• 개인 토이 프로젝트 / PoC

: 빠른 실험이 우선이어서, Prettier로 포맷만 통일하고 ESLint는 핵심 오류 위주로 최소 적용하는 편이 부담이 적습니다.

• 팀 단위의 기능 개발 프로젝트

:합류 인원이 바뀌어도 기준이 흔들리지 않게, Prettier는 저장 시 자동 적용으로 고정하고 ESLint는 규칙을 팀 표준으로 맞춰 리뷰 이전에 걸러지도록 운영하는 흐름이 좋습니다.
 

• 운영 중인 프로덕션 서비스

: 보기 좋은 코드보다 사고를 줄이는 코드의 비중이 커지기 때문에, ESLint 규칙을 더 촘촘히 두고 PR 단계에서 실패 조건으로 잡아 안정성을 확보하는 방식이 선호됩니다.
 

• 라이브러리 / SDK처럼 외부에 배포되는 코드 

: 사용자 환경이 다양해 예측 불가능한 사용을 만나기 쉬워, ESLint 규칙을 더 엄격히 두고 포맷은 Prettier로 완전히 고정해 품질 편차를 줄이는 접근이 많이 쓰입니다.

이렇게 프로젝트 성격에 따라 Prettier는 형태를 자동으로 고정하는 역할, ESLint는 위험 신호를 규칙으로 잡아내는 역할로 강도를 조절해 두면, 팀이 커져도 기준이 무너지지 않고 코드 리뷰도 훨씬 매끄럽게 흘러갑니다.

ESLint · Prettier를 사용할 때 주의사항 3가지

ESLint와 Prettier는 잘만 활용하면 개발 환경을 크게 개선해 주지만, 도입 과정에서 몇 가지를 놓치면 오히려 불편함이 커질 수 있습니다. 특히 팀 프로젝트에서는 아래 세 가지를 먼저 고려하시는 것이 좋습니다.

1) 두 도구의 역할을 명확히 나눠주세요

Prettier는 코드의 형태와 스타일을 자동으로 정리하는 도구이고, ESLint는 코드의 위험 신호와 규칙 위반을 잡아내는 도구입니다. 

도입 단계에서부터 ‘포맷은 Prettier, 규칙은 ESLint’라는 기준을 분명히 해두는 것이 중요합니다.

이 역할의 구분이 명확하지 않으면, 포맷과 관련된 규칙이 중복되거나 서로 충돌해 개발 경험이 나빠질 수 있습니다. 

2) 핵심적인 규칙부터 점진적으로 적용해 보세요

ESLint에는 다양한 규칙이 존재하지만, 이를 한 번에 모두 적용하면 기존 코드에 수많은 경고와 에러가 발생할 수 있습니다. 

특히 이미 운영 중인 프로젝트라면 개발 흐름이 크게 흔들릴 수 있습니다. 핵심적인 규칙부터 점진적으로 적용하고, 팀이 적응할 시간을 확보하는 방식이 훨씬 안정적입니다.

3) 팀 합의 없이 도입하면 반발이 생길 수 있습니다

ESLint와 Prettier는 개발 방식에 직접적인 영향을 주는 도구입니다. 충분한 공유 없이 일방적으로 도입하면, 불필요한 제약으로 받아들여질 수 있습니다. 

어떤 규칙을 적용할지, 어디까지 자동으로 강제할지에 대해 팀 내에서 최소한의 합의를 거친 뒤 도입하는 것이 장기적으로 더 효율적인 운영으로 이어집니다.

이 세 가지를 미리 고려해두면, ESLint와 Prettier를 팀의 개발 기준을 안정적으로 지켜주는 도구로 활용하실 수 있습니다.

 프로젝트 규모가 커질수록, 

프로젝트의 ‘공통 기준’이 중요합니다.

ESLint와 Prettier는 코드의 형태와 기준을 정리해 개발 환경과 협업 구조를 안정적으로 만들어주는 도구입니다. 우리 팀의 개발 방식에 맞는 ESLint와 Prettier 기준을 정리하고 협업에 바로 적용해 보세요. 

코드 리뷰와 유지보수에 소모되던 시간은 자연스럽게 줄어들고, 개발 효율은 한층 높아지는 경험을 하실 수 있을 것입니다.

최신 개발 트렌드, 아래 3가지를 참고하세요.

노코드가 만든 ‘코드 없는 혁신의 시대’

개발할 때 알아두면 유용한 바이브 코딩 툴 TOP 5

WebAssembly가 차세대 웹의 ‘핵심 기술’로 평가받는 이유

개발 효율과 안정성을 함께 높일 수 있는 

개발자를 찾고 계신가요?

대한민국 최대 IT 프리랜서 매칭 플랫폼에서 매칭받아 보세요.

이랜서는 우리나라 최대 IT 프리랜서 매칭 플랫폼으로, 26년간 8만 건 이상의 IT 프로젝트를 통해 기업의 시스템 환경과 보안 요구 수준에 맞는 IT 프리랜서를 검증하고 매칭해 왔습니다.

개발자 채용, 왜 프리랜서를 선택할까?

즉시 투입 가능

프리랜서 개발자는 다양한 산업군과 유사한 프로젝트 경험을 보유해, 긴 적응 기간 없이 바로 업무에 투입할 수 있습니다.

채용 속도 차이

정규직 채용이 2~3개월 이상 소요되는 반면, 프리랜서는 1주일 내 매칭 및 즉시 투입이 가능합니다.

프로젝트 맞춤 선택

프로젝트 목적 · 기간 · 기술 스택에 맞는 프리랜서 개발자를 필요한 시점에 선택적으로 매칭할 수 있습니다.

IT 전문가가 필요할 때라면 언제든지

기업회원이라면 필요할 때마다 41만 명 규모의 IT 인재풀을 기반으로, 프로젝트에 맞는 IT 프리랜서를 빠르게 확인하실 수 있습니다. 

프로젝트 등록이 어렵다면 걱정마세요. 1:1 전문 매니저가 프리랜서 인터뷰부터 최종 매칭까지 전 과정을 함께 지원합니다. 복잡한 채용은 이랜서에 맡기고, 프로젝트 핵심 업무에만 집중하세요.