Prettier vs ESLint: 코드 포맷터와 린터의 차이, 그리고 함께 써야 하는 이유

반응형

 

Prettier vs ESLint: 코드 포맷터와 린터의 차이, 그리고 함께 써야 하는 이유

코드를 작성하다 보면, 누군가는 세미콜론을 찍고 누군가는 안 찍는 등 스타일이 제각각이어서 보기 불편할 때가 많습니다.

또 어떤 코드는 실행은 되지만 비효율적이거나 위험한 문법을 쓰기도 하죠.

이럴 때 코드를 ‘보기 좋게’ 만들어주는 도구가 Prettier, 그리고 코드를 ‘올바르게’ 만들어주는 도구가 ESLint입니다.

두 도구는 하는 일이 다르지만, 함께 쓰면 개발 생산성과 코드 품질이 크게 향상됩니다.
이 글에서는 두 도구의 차이와 함께 사용하는 이유를 입문자도 이해하기 쉽게 설명합니다.

Prettier vs ESLint 설명 삽화 이미지

1. Prettier와 ESLint란 무엇인가?

개발을 하다 보면 “코드를 어떻게 써야 예쁜가?” 또는 “이 코드가 맞는 방식일까?”라는 고민이 생깁니다.

이 두 가지 고민을 해결해주는 대표적인 도구가 바로 Prettier와 ESLint입니다.

이 둘은 비슷해 보이지만, 사실 역할이 전혀 다릅니다.

Prettier는 ‘보기 좋은 코드’를 만들어주는 도구, ESLint는 ‘올바른 코드’를 만들어주는 도구입니다.

 

🔷 Prettier – 코드 포맷터 (Code Formatter)

“An opinionated code formatter - it enforces a consistent style by parsing your code and reprinting it with its own rules.”
→ Prettier는 “자신만의 규칙을 적용해 코드를 일관된 스타일로 재정렬하는 포맷터”입니다.

 

즉, Prettier는 코드 스타일을 자동으로 정리해 주는 도구입니다.
코드를 실행하기 전에 들여쓰기, 줄 바꿈, 따옴표, 세미콜론 같은 요소를 자동으로 맞춰줍니다.

예를 들어, 이런 들쭉날쭉한 코드가 있다고 해 봅시다.

function hello(name){console.log("Hello, "+ name)}

 

Prettier가 자동으로 이렇게 바꿔줍니다

function hello(name) {
  console.log("Hello, " + name);
}

코드의 동작은 완전히 동일하지만, 가독성(readability)은 훨씬 좋아졌습니다.

Prettier는 코드를 “더 예쁘게” 만들 뿐, 코드의 기능이나 논리에는 전혀 영향을 주지 않습니다.

따라서 팀원 간의 스타일 차이를 없애고, 누가 작성했든 “일관된 형태의 코드”를 유지할 수 있게 해 줍니다.

 

🔷 ESLint – 코드 린터 (Code Linter)

“A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.”
→ ESLint는 “JavaScript 코드에서 발견되는 문제 패턴을 찾아내고 보고하는 도구”입니다.

 

즉, ESLint는 코드의 문법 오류나 잘못된 습관을 사전에 잡아주는 ‘코드 분석기’입니다.

Prettier가 코드의 ‘모양’을 다듬는다면, ESLint는 코드의 ‘내용’을 점검하는 셈이죠.

예를 들어, 이런 코드가 있다고 가정해 봅시다.

let name = "John"
console.log(hello)

이 코드는 실행하면 오류가 납니다. hello라는 변수를 정의하지 않았기 때문이죠.

ESLint는 이런 문제를 미리 찾아서 에디터에서 빨간 밑줄로 경고해 줍니다. 또한, 단순한 오류뿐 아니라 코딩 스타일 가이드도 적용할 수 있습니다.

 

예를 들어,

▸ 변수명은 camelCase로 써야 한다,
▸ console.log()는 실제 코드에서 사용하지 말자,
▸ 미사용 변수는 자동으로 경고하자,

이런 규칙들을 설정해 두면, ESLint가 자동으로 코드 전체를 검사해 줍니다.

 

2. Prettier vs ESLint: 역할과 차이점 쉽게 이해하기

Prettier와 ESLint는 이름도 비슷하고, 둘 다 “코드를 관리하는 도구”라서 처음엔 혼동하기 쉽습니다.

하지만 실제로는 각자 맡은 역할이 뚜렷이 다릅니다.

Prettier는 코드의 “모양”, ESLint는 코드의 “내용”을 다룹니다.

 

🔷 Prettier와 ESLint의 주요 차이점

구분	Prettier	ESLint
목적	코드 스타일 자동 정리	코드 문법과 품질 검사
초점	보기 좋게 만드는 것	올바르게 만드는 것
수정 방식	자동으로 포맷팅	오류를 경고하거나 수정 제안
예시	들여쓰기, 따옴표, 세미콜론 등	변수 미사용, 잘못된 문법, 위험한 코드

 

✔️ 쉽게 비유하자면

▸ Prettier는 문서를 예쁘게 꾸며주는 편집기(editor) 같은 존재입니다.

→ 글의 문맥은 그대로 두고, 띄어쓰기나 문단 정렬, 따옴표 같은 스타일만 다듬습니다.

 

▸ ESLint는 맞춤법과 문법을 점검하는 교정기(proofreader)입니다.

→ 글의 형식이 아니라, 문장이 문법적으로 올바른지, 논리적 오류는 없는지를 검사하죠.

 

🔷 겹치는 기능과 충돌 문제

두 도구는 서로 다른 목적을 갖고 있지만, 일부 영역에서는 겹치는 기능이 있습니다.

예를 들어 ESLint도 세미콜론(;) 사용 여부나 따옴표(' vs ") 규칙을 검사할 수 있습니다.

그런데 Prettier 역시 동일한 부분을 자동으로 포맷팅 합니다.

 

이럴 경우, ESLint는 “세미콜론 없어야 함”이라고 경고하는데 Prettier는 “세미콜론 추가함”이라고 자동 수정하는 식으로 충돌(conflict)이 발생할 수 있습니다.

 

🔷 해결 방법: 역할 분리하기

이 문제를 방지하려면, 각자의 역할을 명확히 구분해야 합니다.
▸ Prettier: 코드 스타일 담당 → 보기 좋은 형식 유지
▸ ESLint: 코드 품질 담당 → 오류와 규칙 검증

 

이렇게 역할을 분리해 두면,

▸ Prettier는 들여 쓰기나 줄 바꿈 등 시각적 일관성을 책임지고,
▸ ESLint는 문법, 변수 사용, 코드 품질 등 논리적 안정성을 보장합니다.

 

반응형

 

3. 두 도구를 함께 사용하는 이유

많은 초보 개발자들이 “Prettier와 ESLint는 비슷한 일을 하는 거 아닌가?”라고 묻습니다.
하지만 실제로는 경쟁 관계가 아니라, 서로를 보완하는 ‘팀 플레이어’입니다.

Prettier는 코드를 보기 좋게 만들어주는 디자이너, ESLint는 코드를 안전하게 지켜주는 검사관이라고 생각해 보세요.
둘이 함께 있으면 훨씬 완성도 높은 코드 환경이 만들어집니다.

 

🔷 서로의 부족함을 채워주는 완벽한 조합

▸ Prettier는 코드를 깔끔하게 정리하지만, 문법 오류나 로직 문제는 건드리지 않습니다.

즉, 잘못된 코드라도 보기 좋게 포맷팅 해줄 뿐이죠.

 

▸반면, ESLint는 코드 오류를 잡아내지만, 코드 스타일을 자동으로 수정하지는 않습니다.

오류를 알려주기만 하고, 모양은 그대로 둡니다.

 

🔷 팀 프로젝트에서의 일관성 유지

혼자 개발할 때는 스타일이 조금 달라도 상관없지만, 여러 명이 함께 작업하는 팀 프로젝트에서는 이야기가 달라집니다.

예를 들어 어떤 사람은 세미콜론을 쓰고, 다른 사람은 안 쓰면 코드가 뒤죽박죽 보이겠죠.

이런 사소한 스타일 차이로 코드 리뷰 시간이 길어지기도 합니다.

Prettier와 ESLint를 함께 설정해 두면, 누가 작성하든 동일한 규칙과 스타일이 자동으로 적용됩니다.
덕분에 팀 전체가 “하나의 목소리”로 코드를 작성할 수 있습니다.

 

🔷 저장과 동시에 자동 실행 (개발 효율 극대화)

요즘 많이 사용하는 VSCode 같은 에디터에서는 “파일을 저장할 때 자동으로 Prettier와 ESLint가 실행”되도록 설정할 수 있습니다.

즉, 코드를 작성하고 Ctrl + S(저장)를 누르는 순간,

▸ Prettier가 코드 스타일을 깔끔하게 정리하고,
▸ ESLint가 오류를 실시간으로 잡아줍니다.

 

결과적으로 개발자는 코드의 핵심 로직에만 집중할 수 있고, 도구가 나머지를 자동으로 처리합니다.

 

4. Prettier와 ESLint 함께 쓰는 설정 방법 (예시)

이제 이론은 충분히 이해했으니, 직접 Prettier와 ESLint를 함께 설정하는 방법을 살펴볼 차례입니다.

아래 단계만 차근차근 따라 하면, 여러분의 개발 환경도 “자동 포맷 + 코드 검사”가 완벽히 작동하게 됩니다

 

🔷 설치 명령어

터미널(커맨드라인)에서 아래 명령을 한 줄로 실행하세요:

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

▸ eslint-config-prettier : ESLint에서 Prettier가 자동으로 포맷팅 하는 규칙과 충돌(conflict) 하는 규칙을 비활성화 해줍니다.

▸ eslint-plugin-prettier : Prettier를 ESLint 내부 규칙(rule)으로 실행할 수 있게 해 줍니다.

 

🔷 ESLint 설정 파일 (.eslintrc.js 또는 새 형식 eslint.config.js)

프로젝트 루트(최상위 폴더)에 아래처럼 파일을 생성하거나 수정하세요

# .eslintrc.js 예시
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  rules: {
    // 필요할 경우 추가 규칙을 여기에 작성하세요.
  },
};

▸ "eslint:recommended" - ESLint가 기본 제공하는 “가장 기본적인 오류 검사 규칙들”을 포함합니다.

▸ "plugin:prettier/recommended" - Prettier 플러그인 + Prettier와 충돌하는 ESLint 규칙을 끄는 설정을 한꺼번에 포함합니다.

▸ 최신 도구에서는 ESLint의 새 형식인 Flat Config 방식(eslint.config.js)이 늘어나고 있습니다.

// eslint.config.js

// ESLint 팀이 제공하는 순수 JavaScript용 권장 규칙 세트 모음
import js from '@eslint/js';

// Prettier를 ESLint "규칙(rule)"처럼 실행하게 해주는 플러그인
import prettierPlugin from 'eslint-plugin-prettier';

// Prettier가 책임지는 "포맷팅 관련 규칙"과 충돌하는 ESLint 규칙을 비활성화(disable)
import prettierConfig from 'eslint-config-prettier';

export default [
  // JavaScript 기본 규칙 적용
  js.configs.recommended,

  // Prettier와 연동 (충돌 방지 + 포맷팅 검사)
  {
    plugins: {
      prettier: prettierPlugin,
    },
    rules: {
      // Prettier 포맷팅 오류를 ESLint 에러로 표시
      'prettier/prettier': ['error'],
    },
  },

  // Prettier에서 비활성화해야 하는 ESLint 규칙들 적용
  prettierConfig,
];

 

🔷 Prettier 설정 파일 (.prettierrc)

별도의 설정 파일을 만들어 Prettier 동작을 원하는 스타일대로 지정해 주세요.

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

▸ "semi": true → 세미콜론(;)을 문장 끝에 항상 붙입니다.
▸ "singleQuote": true → 문자열을 작은따옴표(')로 사용합니다.
▸ "tabWidth": 2 → 탭 또는 들여쓰기 폭을 2칸으로 설정합니다.
▸ 위 항목은 예시이며, 팀/개인 기준에 맞게 추가 설정도 가능합니다.

    (예: trailingComma, printWidth, endOfLine 등)

 

🔷 저장 시 자동 실행 설정 및 활용 팁

▸ VSCode 같은 에디터에서는 “저장할 때 자동으로 포맷하고 린트 실행”하도록 설정할 수 있습니다.
▸ package.json에 스크립트를 추가해 두면 터미널에서도 쉽게 실행할 수 있어요

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write ."
}

▸ 이렇게 하면 다음과 같은 흐름이 가능합니다

   1. npm run format → 코드 스타일 자동 포맷
   2. npm run lint → 문법 및 품질 검사

▸ 저장 시 자동 포맷 + 자동 린트로 설정해 두면, 개발자가 스타일이나 품질 걱정 없이 오로지 코드 작성에만 집중할 수 있습니다.

 

✔ 마무리

개발자는 결국 “코드를 쓰는 사람”입니다.

그리고 그 코드가 동료 개발자나 미래의 나에게 읽히는 순간, 그 코드는 단순한 명령어가 아니라 하나의 문서이자 언어가 됩니다.

이때 필요한 것이 바로 Prettier와 ESLint입니다.

두 도구는 서로 다른 역할을 맡고 있지만, 결국 “읽기 쉽고, 안전한 코드”라는 같은 목표를 향해 나아갑니다.

▸ Prettier 공식 문서: https://prettier.io/docs
▸ ESLint 공식 문서: https://eslint.org/docs/latest

 

 

반응형

 

※ 게시된 글 및 이미지 중 일부는 AI 도구의 도움을 받아 생성되거나 다듬어졌습니다.