본 포스트에서는 TypeScript 코드 형식을 자동으로 정리해주는 Prettier와 Visual Studio Code를 통합하는 방법에 대해 다루겠습니다.

1. Prettier 설치

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

npm install --save-dev prettier

2. Visual Studio Code 플러그인 설치

Visual Studio Code에서 Prettier - Code formatter 플러그인을 검색하여 설치합니다.

3. Visual Studio Code 설정

Visual Studio Code의 설정(JSON 파일)을 열고 아래와 같이 Prettier를 기본 포매팅 툴로 설정합니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4. Prettier 설정

프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하고, 아래와 같이 Prettier 설정을 추가합니다.

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

이제 Visual Studio Code에서 TypeScript 코드를 작성하고 저장하면, Prettier가 자동으로 코드를 정리해줍니다.

위의 단계를 따라하면 TypeScript 코드를 더 이상 수동으로 정리할 필요가 없어집니다. 시간을 절약하고 더 깔끔한 코드를 유지할 수 있습니다.

더 자세한 내용은 Prettier 공식 문서를 참고하세요.