Angular 프로젝트에서 코드 포맷팅을 편리하게 처리할 수 있는 Prettier를 적용하는 방법을 알아보겠습니다.

1. Prettier 설치하기

먼저 Prettier를 프로젝트에 설치합니다. 터미널을 열고 다음 명령어를 실행합니다.

npm install --save-dev prettier

2. Prettier 설정 파일 추가하기

프로젝트 루트 디렉토리에 .prettierrc 또는 prettier.config.js 파일을 추가하여 Prettier의 설정을 정의합니다. 예를 들어, 아래와 같이 설정할 수 있습니다.

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
}

3. tslint-config-prettier 설치하기

Prettier는 스타일 가이드 룰을 적용하는 TSLint와 호환되지 않을 수 있습니다. 따라서 tslint-config-prettier 패키지를 설치하여 이 두 도구의 충돌을 방지합니다.

npm install --save-dev tslint-config-prettier

4. tslint 설정 수정하기

tslint.json 파일에서 다음과 같이 설정을 수정합니다.

{
  "extends": [
    "tslint:recommended",
    "tslint-config-prettier"
  ]
}

5. Prettier 실행하기

Prettier 명령어를 사용하여 프로젝트 전체의 TypeScript, HTML, CSS 파일들을 포맷팅할 수 있습니다. package.json 파일에 스크립트를 추가합니다.

{
  "scripts": {
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.html\" \"src/**/*.css\""
  }
}

이제 npm run format 명령어를 실행하여 Prettier를 사용하여 코드를 자동으로 포맷할 수 있습니다.

위의 단계를 따라하면 Prettier가 Angular 프로젝트에 적용됩니다. 코드 포맷팅에 대해 더 이상 걱정할 필요가 없어집니다.