GitHub 오픈소스 탐험

개발자라면 코드 스타일에 대한 논의가 얼마나 많은 시간과 에너지를 소모하는지 잘 알고 계실 겁니다. 서로 다른 스타일과 포맷을 가진 코드가 섞여 있다면 팀원 간의 코드 리뷰는 불필요한 논쟁으로 이어지기도 하죠. 이런 문제를 혁신적으로 해결해주는 도구가 바로 Prettier입니다. Prettier는 일관된 코드 스타일을 유지할 수 있도록 도와주는 의견 기반 코드 포매터로, 다양한 언어를 지원하며, 간단한 설정으로 복잡한 스타일 규칙을 관리할 수 있게 해줍니다.

Prettier의 주요 기능과 특징

Prettier의 가장 큰 특징은 코드 스타일을 강제적으로 통일시켜 준다는 점입니다. JavaScript, TypeScript, Flow, CSS, HTML, JSON 등 다양한 언어를 지원하며, 각 언어에 맞는 최적의 규칙을 적용합니다. 이로 인해 개발자는 코드의 가독성을 높이고, 팀 내에서 발생할 수 있는 스타일 관련 논쟁을 줄일 수 있습니다.

주요 언어 지원

JavaScript/TypeScript: ES6, JSX, Flow
CSS/SCSS/Less: 다양한 스타일 시트 언어
HTML/Vue/Angular: 프론트엔드 개발에 필수적인 언어
GraphQL/Markdown/YAML: 데이터 형식 및 문서화에 유용

Prettier는 코드를 파싱하여 이를 재출력하고, 최대 줄 길이에 따라 코드를 자동으로 줄 바꿈해 줍니다. 이렇게 하면 예를 들어 함수의 인자가 너무 길거나 많은 경우에도 깔끔하게 정리된 코드를 얻을 수 있습니다.

예시 코드

아래와 같은 코드를 Prettier를 통해 포맷팅하면:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

다음과 같이 정리됩니다:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
);

이처럼 Prettier는 코드 스타일을 통일시켜 줄 뿐만 아니라, 개발 과정에서 일어날 수 있는 불필요한 논쟁을 미연에 방지해 줍니다.

Prettier 설치 및 기본 사용법

Prettier를 사용하기 위해선 먼저 설치가 필요합니다. Node.js가 설치되어 있어야 하며, 아래의 명령어로 Prettier를 설치할 수 있습니다.

npm install --save-dev prettier

설치가 완료되면, 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하여 기본 설정을 추가할 수 있습니다. 예를 들어, 다음과 같은 설정을 추가할 수 있습니다:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

이제 Prettier를 실행하여 코드를 포맷팅해보겠습니다. 아래의 명령어를 통해 특정 파일을 포맷할 수 있습니다.

npx prettier --write "src/*/.js"

또한, Git의 pre-commit 훅을 활용하여 커밋 전에 자동으로 코드를 포맷팅하는 설정도 가능합니다. 이를 위해 husky와 같은 패키지를 사용할 수 있습니다.

npm install --save-dev husky
npx husky install
npx husky add .husky/pre-commit "npx prettier --write ."

이렇게 설정하면, 커밋 시 항상 코드 스타일이 유지됩니다.

실무에서의 활용 시나리오

Prettier는 팀 프로젝트에서 특히 유용합니다. 여러 명의 개발자가 서로 다른 스타일로 코드를 작성하는 경우, Prettier를 사용하면 코드 리뷰 과정이 훨씬 원활해집니다. 팀원들은 코드 스타일에 대한 피드백을 주지 않고도, 코드의 로직과 구조에만 집중할 수 있습니다.

예를 들어, 프론트엔드 팀에서는 React 컴포넌트 파일을 작성할 때 Prettier를 통해 JSX 코드를 포맷팅하여 일관된 스타일을 유지할 수 있습니다. 또한, CSS 파일에서도 동일한 규칙을 적용하여 스타일 충돌을 방지할 수 있습니다.

비슷한 도구와의 비교

Prettier 외에도 ESLint, TSLint와 같은 도구들이 있습니다. 하지만 이들은 주로 코드 품질을 관리하고, 문법 오류를 검출하는 데 초점을 맞추고 있습니다. 반면, Prettier는 코드 스타일에 집중하여, 코드의 가독성을 높이는 데 중점을 둡니다. 두 도구를 함께 사용하면 코드 품질과 스타일을 동시에 관리할 수 있습니다.

마무리 및 추천 대상

Prettier는 팀 내에서 코드 스타일을 일관되게 유지하고, 코드 리뷰 과정을 효율적으로 개선하고자 하는 모든 개발자에게 추천합니다. 간편한 설치와 설정으로 빠르게 적용할 수 있으며, 다양한 언어를 지원하기 때문에 웹 개발 환경에서 특히 유용합니다.

지금 바로 Prettier를 활용하여 코드 스타일의 일관성을 지켜보세요! 더 많은 정보는 GitHub Prettier 페이지에서 확인할 수 있습니다.

코드 포맷터로 일관성을 유지하는 방법: Prettier로 해결하기