타입스크립트 프로젝트를 진행하다 보면 코드의 일관성 있는 포맷팅이 중요합니다. 코드 스타일이 통일되면 코드를 읽고 유지보수하는데 도움이 되기 때문입니다. 이를 도와주는 도구 중 하나가 Prettier입니다. Prettier를 사용하면 코드 스타일 및 포맷팅을 자동으로 적용하여 코드량을 줄이고, 더 깔끔한 코드를 작성할 수 있습니다.
Prettier 설치
먼저, 프로젝트 루트 디렉토리에서 다음 명령을 사용하여 Prettier를 설치합니다.
npm install --save-dev prettier
Prettier 설정
프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하고, 다음과 같은 설정을 추가합니다.
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80
}
위 예시는 Prettier가 세미콜론을 제거하고, 작은 따옴표를 사용하며, 탭 너비를 2로, 행의 최대 너비를 80으로 설정하는 옵션입니다.
Prettier 실행
package.json 파일의 scripts 부분에 다음 스크립트를 추가하여 Prettier를 실행할 수 있습니다.
{
"scripts": {
"format": "prettier --write \"src/**/*.ts\""
}
}
위 예시에서는 src 디렉토리 내의 모든 TypeScript 파일에 Prettier를 적용하도록 설정했습니다.
Prettier와 코드 편집기 통합
대부분의 코드 편집기에서 Prettier를 지원하므로 편집기 확장 프로그램을 설치하여 저장 시 자동으로 Prettier를 실행하도록 설정할 수 있습니다. 예를 들어, Visual Studio Code에서는 Prettier - Code formatter 확장 프로그램을 설치하고 설정하여 사용할 수 있습니다.
이제 Prettier를 타입스크립트 프로젝트에 적용했습니다. 코드 포맷팅에 신경 쓰지 않고 더 나은 코드를 작성하세요!
참고 자료
본 블로그 포스트는 타입스크립트 및 Prettier에 대한 기본적인 지식을 가정하고 작성되었습니다.