Prettier 사용법 완벽 가이드: 설치부터 자동화까지 한눈에!

Prettier 사용법 완벽 가이드: 설치부터 자동화까지 한눈에!

코드 스타일 일관성을 유지하고, 개발 생산성을 높이는 데 도움을 주는 Prettier! 이번 글에서는 Prettier의 기본 개념부터 설치, 설정, Node.js 자동화 스크립트 작성법까지 단계별로 상세히 알아봅니다.

목차

1. Prettier란? 주요 기능 및 장점
2. 설치 방법 (로컬/전역/프로젝트 초기화)
3. 기본 사용법 (CLI, 표준 입력, 설정 파일)
4. 설정 파일 .prettierrc 옵션 해설
5. CLI 전체 옵션 총정리
6. Node.js 자동화 스크립트 작성법
7. Rocky Linux 환경에서의 활용
8. 활용 팁 및 확장 사례

1. Prettier란?

Prettier는 코드 스타일을 자동으로 정리해주는 오픈소스 코드 포맷터입니다. 다양한 언어를 지원하며, 개발자 간 스타일 차이를 줄이고, 일관된 코드 스타일을 유지할 수 있도록 돕습니다.

• 일관된 코드 스타일 유지
• JavaScript, TypeScript, JSON, HTML, CSS 등 다양한 언어 지원
• 에디터 및 CI/CD와 통합 가능
• 간단한 설정과 사용법

2. 설치

로컬 설치

npm install --save-dev prettier

전역 설치

npm install -g prettier

프로젝트 초기화

npx prettier --write .

3. 기본 사용법

CLI 명령어 사용

npx prettier --write 파일명.js

표준 입력 사용

echo "const a = 1;" | npx prettier --stdin-filepath test.js

설정 파일 적용

.prettierrc 파일을 루트 디렉토리에 두면 자동으로 설정이 적용됩니다.

4. 설정 파일 .prettierrc

주요 옵션 설명

• printWidth: 한 줄 최대 길이 (기본값 80)
• tabWidth: 탭 너비 (기본값 2)
• useTabs: 탭 사용 여부
• semi: 세미콜론 사용 여부
• singleQuote: 작은따옴표 사용 여부

예시 설정

{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

5. CLI 전체 옵션

포맷 관련 명령어

• --write: 파일 수정
• --check: 포맷 필요 여부 확인
• --list-different: 포맷 불일치 파일 목록 출력

설정 관련 옵션

• --config: 설정 파일 경로 지정
• --no-config: 설정 파일 무시

스타일 관련 옵션

• --tab-width: 탭 너비 지정
• --single-quote: 작은따옴표 사용

사용 예시

npx prettier --write src/**/*.js
npx prettier --config myconfig.json --check .

6. Node.js 기반 자동화

자동 포맷 스크립트 작성

특정 폴더(src/) 내의 .js, .ts, .html, .json 등 파일을 찾아 Prettier API로 자동 포맷을 수행합니다. 기본적으로 포맷된 결과는 out/ 폴더에 저장하지만, 옵션에 따라 원본을 덮어쓸 수도 있습니다.

폴더 구조 예시

project/
├─ format.js         ← 자동 포맷 스크립트
├─ src/              ← 원본 소스 코드 파일 위치
│    ├─ index.js
│    ├─ components/
│    │    └─ header.ts
│    └─ templates/
│         └─ page.html
├─ out/              ← 포맷 결과 저장 디렉토리 (기본값)
└─ .prettierrc       ← Prettier 설정 파일

주요 옵션 및 사용법

옵션	설명	예시
--dry-run	실제 변경 없이 포맷 대상 파일만 출력	node format.js --dry-run
--ext	포맷할 파일 확장자를 콤마로 지정 (기본값: .js, .ts, .html, .json)	node format.js --ext=.js,.jsx
--overwrite	포맷 결과를 원본 파일에 덮어쓰기	node format.js --overwrite
--quiet	로그 출력을 최소화	node format.js --quiet

실행 흐름

1. src/ 폴더를 재귀적으로 탐색하여 지정한 확장자에 맞는 파일 리스트를 수집합니다.
2. 각 파일을 Prettier API로 포맷합니다.
3. 포맷 결과가 원본과 다르면,
   • 기본적으로 out/ 폴더 내 동일 경로에 저장하거나,
   • --overwrite 옵션 시 원본 파일을 덮어씁니다.
4. --dry-run 옵션이 있으면 실제 변경 없이 포맷할 파일만 콘솔에 출력합니다.
5. 에러 발생 시 해당 파일을 건너뜁니다.

실행 예시

# 1) 기본 실행: src 내 파일 포맷 → out 폴더에 저장
node format.js

# 2) 변경 없이 포맷 대상 파일만 확인 (dry-run)
node format.js --dry-run

# 3) 원본 파일 직접 덮어쓰기 (overwrite)
node format.js --overwrite

# 4) 포맷할 확장자 지정 (js, jsx만)
node format.js --ext=.js,.jsx

# 5) 로그 최소화 (quiet)
node format.js --quiet

7. Rocky Linux 환경 적용

• CLI 기반 사용 가능: npx prettier --write app.js
• Node.js 스크립트 활용 시 crontab 등 자동화 가능
• exec() 기반 백엔드 연동도 고려 가능

8. 활용 팁 & 확장 예시

• VSCode 확장으로 자동 저장 시 포맷 적용
• Git Hook(Husky) 연동하여 커밋 전 코드 포맷
• textarea → 백엔드 포맷 API 서비스 구축 아이디어

---

Prettier 자동화 도입으로 개발 생산성을 높이고 깔끔한 코드 스타일을 유지해 보세요!

이 글은 IT 자동화 및 시스템 최적화를 전문으로 하는 스마트베이에서 작성했습니다.

---

스마트베이 | IT 자동화 혁신 파트너
비즈니스 효율을 높이는 스마트한 IT 솔루션을 제공합니다.

웹사이트 : www.esmartbay.co.kr
E-mail : smartbay.svc@gmail.com
카카오톡 : 바로 상담하기