Prettier는 코드 포맷팅 도구로서, JavaScript뿐만 아니라 HTML, CSS, TypeScript 등 다양한 언어의 코드를 일관된 형식으로 포맷팅할 수 있습니다. 이를 통해 코드 작성 시간을 단축하고 일관된 코드 스타일을 유지할 수 있습니다.

Prettier 설치

먼저, 프로젝트 루트 디렉토리에서 다음 명령을 사용하여 Prettier를 설치합니다.

npm install --save-dev --save-exact prettier

Prettier 구성

프로젝트 루트 디렉토리에 .prettierrc 파일을 만들고, 원하는 Prettier 구성 옵션을 정의할 수 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다.

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

위 설정은 세미콜론을 사용하지 않고, 따옴표는 홑따옴표를 사용하며, 들여쓰기는 2칸으로 설정한 것입니다.

Prettier 사용

Prettier를 사용하여 코드를 자동으로 포맷하려면, 프로젝트 루트 디렉토리에서 다음 명령을 실행합니다.

npx prettier --write .

이 명령은 프로젝트 내의 모든 파일을 Prettier로 자동 포맷팅하여 일관된 코드 스타일을 적용합니다.

통합

많은 코드 편집기 및 IDE에서 Prettier를 통합하여 사용할 수 있습니다. 예를 들어, Visual Studio Code의 경우 Prettier 확장을 설치하고 설정에서 “format on save” 옵션을 활성화하여 저장 시 자동으로 Prettier를 적용할 수 있습니다.

Prettier는 일관된 코드 스타일을 유지하고, 코드 포맷팅을 단순하고 편리하게 해주어 개발자들에게 큰 도움이 됩니다.

더 많은 정보를 원하시면 Prettier 공식 문서를 참고하시기 바랍니다.