Prettier 설정 가이드: VSCode · IntelliJ에서 코드 스타일 자동화하기

VSCode / IntelliJ에서 Prettier 설치 및 설정 방법

Prettier는 코드 포맷터로, 일관된 코드 스타일을 자동으로 유지해주는 도구입니다. 협업이나 팀 프로젝트에서 특히 유용합니다. 이 문서에서는 VSCode와 IntelliJ에서 Prettier를 설치하고 설정하는 방법을 정리합니다.

---

VSCode에서 Prettier 설정하기

1. 확장 프로그램 설치

1. VSCode를 열고 사이드바에서 Extensions (확장) 아이콘 클릭
2. 검색창에 Prettier - Code formatter 입력
3. Prettier 확장 프로그램 설치 (Publisher: Prettier)

2. 기본 설정 적용

설정 파일 (settings.json)에서 다음 항목들을 추가합니다:

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

▶︎ 단축키로 코드 정리하기

• Windows/Linux: Shift + Alt + F
• macOS: Shift + Option + F

위 단축키로 현재 열려 있는 파일을 Prettier 설정에 따라 자동 포맷할 수 있습니다.

3. 프로젝트에 Prettier 설치

프로젝트 루트에서 다음 명령어를 실행하여 Prettier를 의존성으로 추가합니다.

npm install --save-dev prettier

4. 설정 파일 생성 (선택)

.prettierrc 파일을 생성하여 원하는 포맷을 지정할 수 있습니다.

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

▶︎ 자주 사용되는 설정 옵션 설명

• singleQuote: 작은 따옴표 사용 (true면 ', false면 ")
• semi: 문장 끝 세미콜론 사용 여부 (true: 사용, false: 생략)
• tabWidth: 들여쓰기 간격 (기본 2)
• trailingComma: 마지막 쉼표 설정 (none, es5, all 중 선택)
• printWidth: 한 줄에 허용할 최대 글자 수 (기본 80)
• bracketSpacing: 객체 리터럴 중괄호 간 공백 여부 (true: { foo: bar }, false: {foo: bar})
• arrowParens: 화살표 함수 매개변수 괄호 사용 여부 (always, avoid)

5. .prettierignore 파일 생성 (선택)

node_modules
build
dist

---

IntelliJ (WebStorm 포함)에서 Prettier 설정하기

1. Prettier 설치

터미널에서 프로젝트 루트 기준으로 다음 명령어를 실행:

npm install --save-dev prettier

2. Settings 열기

• File > Settings (macOS는 IntelliJ IDEA > Preferences)
• Languages & Frameworks > JavaScript > Prettier

3. Prettier 설정

• Prettier package: 프로젝트 내 prettier 경로 지정 (node_modules/.bin/prettier 혹은 자동 인식)
• On code reformat / On save 체크 (저장 시 자동 포맷팅)

4. .prettierrc 설정 동일하게 적용 가능

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

▶︎ 자주 사용되는 설정 옵션 설명

• singleQuote: 작은 따옴표 사용 (true면 ', false면 ")
• semi: 문장 끝 세미콜론 사용 여부 (true: 사용, false: 생략)
• tabWidth: 들여쓰기 간격 (기본 2)
• trailingComma: 마지막 쉼표 설정 (none, es5, all 중 선택)
• printWidth: 한 줄에 허용할 최대 글자 수 (기본 80)
• bracketSpacing: 객체 리터럴 중괄호 간 공백 여부 (true: { foo: bar }, false: {foo: bar})
• arrowParens: 화살표 함수 매개변수 괄호 사용 여부 (always, avoid)

---

추가 팁

• ESLint와 함께 사용 시 eslint-config-prettier, eslint-plugin-prettier를 함께 설정해 충돌 방지
• 커맨드 라인에서 포맷 적용:

npx prettier --write .

---

마무리

Prettier를 설정해두면 코드 스타일을 통일시키고 팀원 간 코드 충돌을 줄일 수 있습니다. 특히 VSCode와 IntelliJ처럼 사용자가 많은 에디터에서는 설정이 간단하므로 꼭 적용해보길 권장합니다.