Prettier 옵션 완벽 가이드
Prettier는 JavaScript·TypeScript·CSS·HTML·JSON·Markdown 등을 자동 포맷팅하는 사실상 표준 도구입니다. 본 도구는 공식 문서의 16개 옵션을 폼으로 정리해 토글·드롭다운만으로 .prettierrc 파일을 만들고, 같은 옵션이 코드에 어떻게 반영되는지 즉시 미리보기로 보여줍니다.
핵심 옵션 설명: printWidth(권장 80~120)는 한 줄 최대 길이로 이를 넘으면 줄바꿈됩니다. tabWidth는 들여쓰기 칸수, useTabs는 탭 vs 스페이스, semi는 세미콜론 강제 여부, singleQuote는 작은따옴표 사용, trailingComma는 후행 콤마 정책(none·es5·all)으로 git diff를 깨끗하게 유지하려면 all 권장입니다. arrowParens는 화살표 함수 매개변수의 괄호 정책으로 always가 표준입니다. bracketSameLine·jsxSingleQuote는 JSX 특화 옵션입니다.
주요 기능
1. 16개 핵심 옵션을 폼으로 편집. 2. 4가지 출력 형식(JSON·YAML·JS·package.json). 3. 옵션이 적용된 미니 코드 미리보기. 4. 다운로드·복사 지원. 5. 옵션 상태 LocalStorage 자동 저장.
자주 묻는 질문 (FAQ)
Q. 어떤 출력 형식이 가장 권장되나요?
A. 간단함과 호환성을 위해 .prettierrc.json 또는 package.json의 prettier 필드가 가장 보편적입니다. 동적 설정이 필요하면 .prettierrc.js를 쓰세요.
Q. trailingComma는 어떤 값이 좋나요?
A. 최근 표준은 `"all"`입니다. git diff를 깔끔하게 만들고, 마지막 인수를 추가/삭제할 때 다른 라인이 변경되지 않아 코드 리뷰 노이즈가 줄어듭니다.
Q. ESLint와 충돌하면?
A. eslint-config-prettier를 ESLint 마지막에 extends하면 포맷 관련 ESLint 룰이 자동 꺼져 충돌이 사라집니다.