Prettier + ESLint 설정법! VS Code에서 자동 코드 정리하는 방법 완전 정복

 

 

코딩을 하다 보면, 들쑥날쑥한 들여쓰기나 일관성 없는 따옴표 때문에 코드가 지저분해지는 경우가 많습니다.
이럴 때 Prettier와 ESLint를 함께 설정하면, 저장만 해도 자동으로 코드가 예쁘게 정리됩니다.

이번 글에서는 Prettier + ESLint를 VS Code에 통합 설정하는 방법을 단계별로 차근차근 알려드릴게요.
웹 개발자라면 무조건 세팅해두면 좋은 조합입니다!

---

 

✅ Prettier vs ESLint? 차이점 먼저 짚고 가요!

• Prettier: 들여쓰기, 줄바꿈, 세미콜론 등 “코드 스타일”을 정리해줌
• ESLint: 문법 오류, 불필요한 변수 등 “문법 검사와 규칙 위반”을 알려줌

이 둘을 함께 쓰면 예쁘고 안정적인 코드를 작성할 수 있어요.

---

 

1️⃣ 확장 프로그램 설치하기

 

VS Code 좌측 확장 탭에서 아래 두 가지를 검색해서 설치합니다:

• Prettier - Code formatter
• ESLint

---

 

2️⃣ 프로젝트 폴더에 설정 파일 만들기

 

프로젝트 루트에 아래 두 파일을 만듭니다:

• .prettierrc
• .eslintrc.json

예시 설정:

✅ .prettierrc

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

 

 

✅ .eslintrc.json

 

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off"
  }
}

 

---

 

3️⃣ 자동 저장 시 포맷 되도록 설정하기

 

settings.json 파일에 아래 옵션을 추가합니다.

 

🛠️ 열기 방법:
VS Code → Ctrl + , → 오른쪽 상단 {} 아이콘 클릭

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

이제 파일 저장(Ctrl + S)만 해도 자동으로 포맷과 오류 수정이 됩니다!

---

 

4️⃣ Node.js 환경이라면? 패키지 설치도 필요해요

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

 

→ Node.js 프로젝트인 경우(예: React, Vue)는 위 명령어도 추가로 실행해 주세요.
※ Next.js는 기본 내장된 경우도 있음

---

 

🧼 자동 정리 전후 비교

 

Prettier + ESLint를 설정하면 다음과 같은 차이를 느낄 수 있어요:

설정 전	설정 후
들여쓰기 엉망	깔끔한 들여쓰기
세미콜론 누락	자동으로 추가
코드 길이 제각각	printWidth 기준 줄바꿈

 

---

 

✅ 마무리하며

Prettier + ESLint 설정은 개발 효율성의 핵심입니다.
처음에 약간 귀찮을 수 있지만, 한 번만 제대로 설정해두면 나중엔 저장만 해도 자동 정리! 진짜 편합니다.