[typescript] Prettier와 Django 프로젝트 통합하기

08 Dec 2023

본 포스트에서는 TypeScript 백엔드 언어를 사용하는 Django 프로젝트에서 Prettier 코드 포맷터를 통합하는 방법에 대해 소개한다.

Prettier란?

Prettier는 코드의 형식을 일관성 있게 유지하고 가독성을 높이기 위해 사용되는 도구이다. 주로 JavaScript, TypeScript, CSS, HTML과 같은 프론트엔드 언어에 적용되지만, 백엔드 언어에도 적용할 수 있다.

먼저, 프로젝트 루트 디렉토리에서 Prettier를 설치한다.

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

또는 yarn을 사용할 수도 있다.

yarn add --dev --exact prettier

프로젝트 루트에 .prettierrc 파일을 생성하고, 설정을 추가한다. 아래는 간단한 설정 예시이다.

{
  "singleQuote": true,
  "semi": false
}

이제 Prettier 설정을 마쳤다.

TypeScript 프로젝트에서 Django를 사용할 때, Prettier 포맷팅을 자동으로 적용하려면 특정 설정이 필요하다.

Django 필수 속성 추가

package.json 파일에 다음과 같이 속성을 추가한다.
```
{
  "scripts": {
    "format": "prettier --write '**/*.{js,jsx,ts,tsx,html,css,scss,json}'"
  }
}
```
여기서 format는 사용자가 지정한 확장자를 가진 파일에 대해 Prettier를 실행하는 명령이다.
Prettier 실행

Prettier를 통합하려는 TypeScript 파일에 변경사항을 적용한다.
```
npm run format
```
또는 yarn을 사용할 수도 있다.
```
yarn format
```

이제 TypeScript 백엔드 언어를 사용하는 Django 프로젝트에서 Prettier를 통합하는 방법에 대해 소개했다.

본 포스트는 자체적으로 만들어진 내용이며, Prettier 및 Django의 공식 문서를 참고했습니다.