[Frontend] prettier 적용하기

목차 (OPEN)

• ✨ Prettier란
• 🤔 왜 필요할까
• 💻 Prettier 설치 및 적용 방법
• ⚙ VS Code에서 Prettier 자동 적용 설정 방법
• ⛔ .prettierignore란
• 💻 .prettierignore 만드는 방법

 

 

 

✨ Prettier란

Prettier는 코드 스타일을 자동으로 정리해주는

의견 없는 (Opinionated) 코드 포맷터이다.

 

사람마다 들여쓰기, 세미콜론, 따옴표 등 스타일이 다 다르기 때문에

Prettier가 이런 문제를 사전에 방지해주는 역할을 해주는 것이다.

 

---

🤔 왜 필요할까

1️⃣ 팀 협업에서 코드 스타일 충돌을 방지할 수 있다.

2️⃣ 코드 리뷰 시 스타일에 대한 코멘트를 줄이고 로직에만 집중할 수 있다.

3️⃣ 자동화된 포맷팅으로 일관성 있는 코드를 유지할 수 있다.

4️⃣ CI / CD 에 코드 스타일 검사를 연동할 수 있다.

 

---

💻 Prettier 설치 및 적용 방법

1️⃣ 설치

pnpm을 사용 중인 경우

pnpm add -D prettier

 

npm을 사용 중인 경우

npm install --save-dev prettier

 

 

2️⃣ .prettierrc 생성

프로젝트 루트에 아래와 같은 명령어로 설정 파일을 생성해준다.

touch .prettierrc

 

 

3️⃣ 추천 설정 예시

{
  "semi": true,              // 문장 끝에 세미콜론 붙이기
  "singleQuote": true,       // 홑따옴표 사용
  "tabWidth": 2,             // 탭 너비 설정
  "trailingComma": "all",    // 마지막 요소에 쉼표
  "bracketSpacing": true,    // 중괄호 사이에 공백
  "arrowParens": "avoid"     // 화살표 함수 괄호 사용 여부
}

 

---

⚙ VS Code에서 Prettier 자동 적용 설정 방법

1️⃣ Prettier 확장 설치하기

2️⃣ settings.json에 아래의 설정 추가하기

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

 

 

📌 settings.json 위치

vs code 왼쪽 하단에 보이는 설정 아이콘을 클릭한 후,

설정 을 클릭하면,

 

 

이런 화면이 보이는데,

여기서 우측 상단에 있는 체크 표시된 아이콘을 클릭하면

settings.json 파일이 나온다.

 

 

📌 참고 명령어

pnpx prettier --check .  // 현재 코드가 Prettier 스타일을 따르는지 확인
pnpx prettier --write .  // 스타일이 어긋난 파일 자동 포맷팅

 

---

⛔ .prettierignore란

.prettierignore는 말 그대로 Prettier가 무시해야 할 파일 및 폴더를 지정하는 파일로,

Git의 .gitignore와 비슷하다고 보면 된다.

 

테스트 커버리지 결과물 (coverage/)이나

패키지 매니저가 만든 pnpm-lock.yaml 같은 파일은

굳이 포맷팅 할 필요가 없기 때문에

이런 파일들을 prettier 체크에서 제외해주기 위해서 만들어주는 것이다.

 

---

💻 .prettierignore 만드는 방법

1️⃣ 생성

touch .prettierignore

 

 

2️⃣ 보통 포함하는 내용

# 빌드 파일
dist/
build/

# 테스트 결과
coverage/

# 환경 파일
.env*

# 패키지 락 파일
pnpm-lock.yaml
package-lock.json