🧼 Prettier란? 그리고 설정 방법

Prettier란?

코드 포맷터
내가 작성한 코드를 일정한 규칙에 맞게 자동으로 정리해주는 도구이다.

예시

// 포맷팅 전
function hello ( ){console.log("hi")}

// 포맷팅 후 (Prettier 적용 시)
function hello() {
  console.log("hi");
}

---

🛠️ Prettier의 장점

• 팀원 간 코드 스타일 통일
• 저장할 때마다 자동 정리 → 시간 절약
• 리뷰 때 불필요한 스타일 논쟁 줄어듦

---

⚙️ Prettier 설정 방법 (2가지)

① .prettierrc 파일로 설정

설정 전용 파일을 루트 디렉토리에 만들어서 사용

파일명 예시: .prettierrc, .prettierrc.json, .prettierrc.yaml 등

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100
}

→ 이 파일이 있으면 Prettier는 여기 설정을 따름

---

② package.json 안에 "prettier" 항목으로 설정

따로 파일 안 만들고, 프로젝트 설정 파일 안에서 설정

{
  "name": "my-project",
  ...
  "prettier": {
    "semi": true,
    "singleQuote": true}
}

→ 이 경우에도 동일하게 작동함

---

✨ 결론 요약

항목	설명
.prettierrc 파일 있음	Prettier는 이걸 우선 사용
package.json 설정	가능하지만 .prettierrc보다 우선순위 낮음
둘 다 있음	헷갈릴 수 있으니 하나만 쓰는 걸 권장