[typescript] Prettier와 Sublime Text 통합하기

08 Dec 2023

typescript

1. Prettier란 무엇인가

Prettier는 자바스크립트와 타입스크립트 코드 포맷터로, 코드를 보기 좋게 자동으로 정렬하고 들여쓰기를 규격에 맞게 설정해줍니다. 이를 통해 코드 작성시 일관된 스타일을 유지할 수 있으며, 협업 과정에서 코드 리뷰와 충돌을 최소화할 수 있습니다.

2. Sublime Text에 Prettier 통합하기

Sublime Text에 Prettier를 통합하여 코드 포맷팅을 자동으로 적용하는 방법은 다음과 같습니다.

단계 1: Package Control 설치

Sublime Text에서 Package Control을 설치합니다. Ctrl + Shift + P를 눌러 Command Palette를 열고 “Package Control: Install Package”를 선택하여 Package Control을 설치합니다.

단계 2: Prettier 설치

Package Control을 통해 Prettier를 설치합니다. 다시 Ctrl + Shift + P를 눌러 Command Palette를 열고 “Package Control: Install Package”를 입력한 후, “Prettier”를 선택하여 설치합니다.

단계 3: 설정

Prettier를 설치한 후, Sublime Text의 Preferences > Package Settings > Prettier > Settings - User를 열어 Prettier 설정을 추가합니다. 예를 들어, 아래와 같이 Prettier 설정을 추가할 수 있습니다.

{
  "auto_format_on_save": true,
  "print_width": 100,
  "tab_width": 2,
  "single_quote": true,
  "trailing_comma": "all",
  "semi": false
}

위 설정에서 “auto_format_on_save”를 true로 설정하면 저장할 때마다 자동으로 포맷팅을 적용할 수 있습니다.

단계 4: 타입스크립트 파일에서 Prettier 사용하기

이제 타입스크립트로 작성된 파일을 열고 저장하면 Prettier가 자동으로 코드를 포맷합니다.

3. 결론

이제 Sublime Text에서 Prettier를 통합하여 타입스크립트 코드를 자동으로 포맷팅할 수 있습니다. 코드 작성의 효율성을 높이고, 일관된 형식으로 코드를 유지할 수 있는 장점을 누릴 수 있습니다. Sublime Text 사용자라면 Prettier를 통합하여 개발 환경을 더욱 향상시킬 수 있을 것입니다.

목차