Prettier 설정

17.2.1. .prettierrc 전체 예시

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": true
}

---

17.2.2. .prettierignore

dist/
node_modules/
*.min.js
coverage/

---

17.2.3. 설정 원칙

항목	값	이유
semi	false	세미콜론 불필요
singleQuote	true	문자열에 작은 따옴표 통일
trailingComma	all	diff 최소화
printWidth	100	가독성과 화면 활용의 균형
endOfLine	lf	크로스 플랫폼 일관성
singleAttributePerLine	true	Vue 템플릿 가독성 향상

---

17.2.4. ESLint와의 역할 분담

영역	담당 도구
코드 포매팅 (들여쓰기, 따옴표, 줄바꿈)	Prettier
코드 품질 (미사용 변수, any 타입, console)	ESLint
Vue SFC 규칙 (블록 순서, API 스타일)	ESLint

• Prettier는 코드 스타일만 담당합니다.
• ESLint는 코드 품질과 Vue 관련 규칙을 담당합니다.
• eslint-config-prettier로 두 도구 간 충돌을 방지합니다.