과거에는 코드 포맷팅은 각자의 스타일에 따라 다르게 적용되어 왔습니다. 그러나 Prettier를 이용하면 코딩 스타일과 관계없이 일관된 포맷으로 코드를 정리할 수 있습니다. 이번 블로그에서는 TypeScript 프로젝트에 Prettier를 적용하고, Visual Studio Code에서 편리하게 사용하는 방법을 알아보겠습니다.

Prettier란 무엇인가요?

Prettier는 코드의 형식을 맞추고 일관적으로 유지해 주는 도구입니다. 자바스크립트, TypeScript, CSS, JSON 등 다양한 언어에 대한 지원이 있어서, 여러 프로젝트에서 유용하게 활용됩니다.

프로젝트에 Prettier 설정하기

먼저 프로젝트에 Prettier를 설치해야 합니다. npm을 이용하여 다음 명령어를 실행합니다.

npm install --save-dev prettier

설치가 완료되면 프로젝트 루트에 .prettierrc 파일을 생성하여 Prettier 설정을 추가합니다.

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

이제 Prettier가 포맷팅을 적용할 때 사용할 옵션들을 설정했습니다. 이제 포맷팅을 실행할 때 .prettierrc 파일에 작성된 설정을 따르게 됩니다.

VSCode와 Prettier 통합하기

프로젝트에 Prettier를 설정했다면 이제 Visual Studio Code와 통합하여 사용할 수 있습니다. 먼저 VSCode의 확장 메뉴에서 “Prettier - Code formatter”를 검색하여 설치합니다.

설치가 완료되면 .vscode/settings.json 파일을 생성하고 다음 내용을 추가합니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

이제 VSCode에서 파일을 저장하면 Prettier가 자동으로 포맷팅해 줍니다.

이렇게 함으로써 프로젝트에 Prettier를 설정하고, VSCode와 통합하여 코딩을 더욱 편리하게 할 수 있습니다.

더 많은 정보를 원하신다면, Prettier 공식 문서를 참고하시기 바랍니다.