Prettier는 코드 포맷팅 툴로 TypeScript와 같은 언어에서 코드를 일관된 형식으로 만들어줍니다. 이번 포스트에서는 Prettier를 TypeScript 코드에 적용하고, Markdown 문서에 코드를 삽입할 때 Prettier를 사용하는 방법에 대해 알아보겠습니다.

Prettier 설치 및 설정

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

npm install --save-dev prettier

그 다음, 프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하여 Prettier 구성을 추가합니다.

.prettierrc

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

위의 설정은 세미콜론 자동 삽입, 작은따옴표 사용, 탭 너비 2, 출력폭 80으로 Prettier를 구성하는 예시입니다. 필요에 따라 설정을 변경할 수 있습니다.

TypeScript 코드에 Prettier 적용하기

Prettier를 TypeScript 코드에 적용하려면, 프로젝트 루트 디렉토리에 .prettierignore 파일을 생성하여 포맷팅에서 제외할 파일을 지정할 수 있습니다.

.prettierignore

dist/
node_modules/

이제 TypeScript 코드를 작성하고 저장할 때마다 Prettier가 자동으로 코드를 해당 구성에 맞게 포맷팅해 줍니다.

Markdown 문서에 Prettier를 사용하여 코드 삽입

Markdown 문서에 코드를 삽입할 때, Prettier를 사용하여 코드를 포맷팅할 수 있습니다. 예를 들어, 아래와 같이 코드 블록을 사용하여 TypeScript 코드를 삽입할 수 있습니다.

```typescript function greet(person: string) { return “Hello, “ + person; }

console.log(greet(“World”)); ```

위와 같이 코드 블록을 사용하면, Prettier가 코드를 자동으로 포맷팅해 줍니다.

마치며

이제 프로젝트에서 TypeScript 코드 포맷팅을 위해 Prettier를 성공적으로 사용하는 방법에 대해 알아보았습니다. Prettier를 통해 코드의 일관성과 가독성을 높일 수 있기 때문에, 프로젝트에 적극적으로 도입해 보는 것을 고려해 볼 만합니다.

참조: Prettier 공식 문서