Prettier란 무엇인가?
Prettier는 코드 포맷터로, 코드를 자동으로 정리하여 일관된 스타일을 유지하도록 돕는 도구입니다. 이를 통해 협업 및 코드 유지보수가 더 쉬워지며, 개발자 간의 스타일 논쟁을 방지할 수 있습니다.
Prettier 주요 특징
1. 자동 코드 포맷팅
코드 작성 후 저장하거나 명령어를 실행하면, Prettier가 정해진 규칙에 따라 코드 포맷을 자동으로 정리합니다.
2. 언어 및 파일 형식 지원
자바스크립트, 타입스크립트, HTML, CSS, JSON, Markdown 등 다양한 언어를 지원합니다.
3. 의견 배제
Prettier는 특정 스타일(탭, 공백, 세미클론 등)을 강제하기 때문에 개발자 간 협업에서 스타일 논쟁을 줄여줍니다.
4. IDE 통합
VS Code, WebStorm 등 IDE와 통합하여 쉽게 사용할 수 있습니다.
5. 프로젝트 단위 설정
.prettierrc 파일로 프로젝트마다 고유한 포맷 설정이 가능합니다.
Prettier가 필요한 이유
1. 코드 일관성 유지
팀 프로젝트에서는 여러 명의 개발자가 다양한 코딩 스타일을 사용하기 쉽습니다. Prettier는 포맷을 표준화해 코드 스타일의 일관성을 유지합니다. 이는 코드 리뷰 시간도 단축시킵니다.
2. 가독성 향상
Prettier가 제공하는 표준화된 규칙은 코드를 더 읽기 쉽고 이해하기 쉽게 만들어줍니다. 가독성이 좋아지면 유지보수 및 디버깅도 쉬워집니다.
3. 생산성 향상
포맷을 수동으로 정리할 필요 없이 Prettier가 자동으로 처리하므로 개발자는 실제 로직 구현에만 집중할 수 있습니다.
4. 팀 내 코드 스타일 논쟁 제거
Prettier는 특정 스타일을 강제하기 때문에 "탭 vs 스페이스"와 같은 논쟁을 없애 줍니다. 이렇게 하면 개발 프로세스가 더 원활해집니다.
5. CI/CD와 연계 가능
Prettier는 Git Hook 또는 CI/CD 파이프라인에서 동작하도록 설정할 수 있어, 모든 팀원이 코드 스타일 규칙을 지키도록 강제할 수 있습니다.
.prettierrrc 작성하기
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "avoid",
"endOfLine": "auto",
"jsxSingleQuote": false,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"htmlWhitespaceSensitivity": "css"
}-
semi: true
- 각 구문의 끝에 세미콜론(;)을 추가합니다.
- false로 설정하면 세미콜론이 생략됩니다.
-
tabWidth: 2
- 탭의 너비를 2칸의 공백으로 설정합니다.
- 기본값은 2이며, 4로 설정하면 더 넓은 들여쓰기가 적용됩니다.
-
printWidth: 100
- 한 줄의 최대 길이를 100자로 제한합니다.
- 초과 시 자동으로 줄바꿈 처리됩니다.
-
singleQuote: true
- 문자열을 홑따옴표(')로 표기합니다.
- false로 설정하면 쌍따옴표(")가 사용됩니다.
-
trailingComma: "all"
- 마지막 요소 뒤에 쉼표(,)를 추가합니다.
const arr = [1, 2, 3,];-
bracketSpacing: true
- 객체 리터럴에서 중괄호 안의 공백을 허용합니다.
- 예: { foo: bar }
false로 설정하면 {foo: bar}로 포맷됩니다.
-
bracketSameLine: false
- HTML, JSX 태그의 닫는 괄호를 새로운 줄에 배치합니다.
<Component
prop1="value"
prop2="value"
/>-
arrowParens: "avoid"
- 매개변수가 하나인 화살표 함수에서 괄호를 생략합니다.
x => x
- 매개변수가 하나인 화살표 함수에서 괄호를 생략합니다.
-
endOfLine: "auto"
- 파일의 줄바꿈 문자를 환경에 따라 자동 감지합니다.
윈도우(\r\n)와 유닉스(\n) 환경 간의 줄바꿈 충돌을 방지합니다.
- 파일의 줄바꿈 문자를 환경에 따라 자동 감지합니다.
-
jsxSingleQuote: false
- JSX에서 문자열을 쌍따옴표(")로 표기합니다.
- true로 설정하면 홑따옴표(')가 사용됩니다.
-
proseWrap: "preserve"
- Markdown 등의 텍스트 파일에서 줄바꿈을 원본 형식대로 유지합니다.
-
quoteProps: "as-needed"
- 객체의 속성 이름에 따옴표를 필요한 경우에만 추가합니다.
{ foo: 1, "bar-baz": 2 }-
htmlWhitespaceSensitivity: "css"
- HTML 파일에서 공백 처리를 CSS 규칙에 따라 결정합니다.
✅ 참고
