Prettier 코드 포매터 설치·설정

Prettier는 저장만 하면 코드를 일관된 스타일로 자동 정렬해 주는 표준 포매터예요. 들여쓰기·따옴표·줄바꿈을 손으로 맞출 필요가 없어지고, 팀이 써도 스타일 싸움이 사라져요. 설치부터 저장 시 자동 포맷까지 정리했어요.

Prettier가 맡는 것 / 아닌 것

Prettier는 웹·설정 파일에 강해요. 언어별로 전용 포매터가 있는 경우엔 그쪽을 써요.

1. 설치

1. Ctrl/Cmd+Shift+X 로 확장 패널 열기
2. Prettier - Code formatter 검색 (게시자 Prettier, ID esbenp.prettier-vscode)
3. 설치 클릭

명령으로 한 번에:

ext install esbenp.prettier-vscode

2. 기본 포매터 지정 + 저장 시 자동 포맷

Ctrl/Cmd+Shift+P → Preferences: Open User Settings (JSON) 에 아래를 넣어요.

{
  // 저장할 때 자동 포맷
  "editor.formatOnSave": true,
  // 기본 포매터를 Prettier로
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 언어별로 따로 지정도 가능 (Go는 Go 확장이 담당)
  "[go]": {
    "editor.defaultFormatter": "golang.go"
  },
  "[json][jsonc][javascript][typescript][css][html][markdown][yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

언어별 블록으로 지정하면 “어떤 파일은 Prettier, Go는 gofmt”처럼 충돌 없이 나눌 수 있어요. 수동 포맷은 Shift+Alt+F.

3. 규칙 파일 .prettierrc (팀 공유용)

프로젝트 루트에 .prettierrc(또는 .prettierrc.json)를 두면, 그 저장소를 여는 모두가 같은 규칙으로 포맷돼요. 에디터 설정보다 이 파일이 우선이라 협업에 이걸 권장해요.

{
  "printWidth": 100,        // 한 줄 최대 폭
  "tabWidth": 2,            // 들여쓰기 칸
  "semi": true,             // 세미콜론
  "singleQuote": true,      // 작은따옴표
  "trailingComma": "all",   // 끝 콤마
  "endOfLine": "lf"         // 개행 통일(윈도우 CRLF 방지)
}

포맷에서 빼고 싶은 경로는 .prettierignore에 (gitignore 문법):

node_modules
dist
build
*.min.js

주요 옵션 빠른 참고