[VS code] Prettier 적용하기

Prettier

Prettier란 다양한 옵션들을 통해 코드를 아름답게 만들어주는 코드 포맷팅(Formatting) 기능입니다.

공식 사이트 https://prettier.io/ 에서 나타내기를, 대표적으로 JavaScript, HTML, CSS, GraphQL, Markdown, Yaml 등 다양한 언어들에 대한 코드 포맷팅을 지원하고 있습니다.

 

왜 써야 할까?

코드를 혼자 작성한다면 Prettier를 통해 자신만의 습관적인 행동과 스타일들을 포맷팅할 수 있습니다. 그러면 코드의 가독성을 높일 수 있고, 개인의 생산성을 높일 수 있습니다. 특히, 잘 정형화된 코드를 보면 편안함을 얻을 수 있습니다.

 

그러나 이 Prettier의 진정한 장점은 사실 협업에 있습니다.

다른 개발자들과의 협업에서, 각자의 습관이나 선호도를 일관하는 것은 많이 어렵습니다.

 

예를 들어, 누군가는 코드의 줄간격을 80 이하로 하는 것이 화면 분할 가독성이 좋다고 하고, 누군가는 120 이상으로 해야 한 눈에 볼 수 있다고 주장할 수 있습니다. 이러한 사항들이 잘 정리되어 있지 않다면, 서로의 코드 리뷰 시간에 각자만의 코드 스타일을 놓고 이야기하는 시간이 길어지게 될 것입니다. 그러면 팀워크와 그 생산성이 떨어질 수밖에 없게 됩니다. 따라서 서로 협업하게 된 개발자들이라면, 서로의 선호를 이해하고 존중하는 선 안에서 하나의 코드 포맷팅을 약속처럼 만들어 두는 것이 가장 좋습니다.

 

사용법

기본적으로 Prettier는 자바스크립트 라이브러리로써 프로젝트에 주입하여 사용할 수 있습니다.

여기서 설명할 VS code에서는, Extension(확장)을 통해 Prettier를 제공하고 있습니다.

VS code의 Extension(확장) 기능에서 "Prettier"를 검색하면 이제는 공식화되어 누구나 사용하게 된 Prettier 확장 기능을 사용할 수 있게 됩니다. 우측 "설치(install)" 버튼을 눌러 설치를 완료하면 VS code 코드 편집기에 Prettier가 적용될 수 있습니다.

 

Prettier를 적용할 코드 포맷팅 설정은 해당 프로젝트의 루트 디렉토리에서 .prettierrc 파일에 작성하도록 합니다.

{
    "printWidth": 80,
    "tabWidth": 4,
    "singleQuote": false,
    "bracketSpacing": true,
    "semi": true,
    "useTabs": false,
    "arrowParens": "avoid",
    "endOfLine": "lf",
    "trailingComma": "es5"
}

Prettier의 또다른 장점으로, 설정해야 하거나 할 수 있는 값들이 또 엄청 다양하진 않기 때문에 정해둔 값을 계속해서 정형화하여 이용할 수 있습니다. 대표적으로 사용하는 값들의 예시로 아래와 같은 값들이 있습니다.

Key	Description
printWidth	코드 줄바꿈 너비
tabWidth	탭 너비 (Space 개수)
singleQuote	홑따옴표 사용 설정
bracketSpacing	빈 오브젝트 띄어쓰기 설정
semi	세미콜론 자동 생성

 

설정을 완료했으면, VS code를 한번 Reload(재시작)합니다.

VS code에서 Cmd + Shift + P 를 입력하면 나오는 명령 팔레트에서 창을 한번 다시 로드해 줍니다.

처음 Prettier를 설정했다면 VS code의 기본 Formatter와 충돌이 일어날 수 있는데 우선적으로 Prettier를 찾도록 재시작합니다.

 

이제 VS code에서 Prettier가 지원하는 언어로 코드를 작성하면, 우측 하단에서 Prettier가 활성화된 것을 볼 수 있습니다.

위 사진처럼 체크 표시가 나왔다면 Prettier가 올바르게 동작하고 있는 것입니다.

또한, 해당 Prettier 버튼을 눌러서 현재 적용되고 있는 포맷팅 설정을 확인할 수 있습니다.

이제 VS code 편집기에서 코드를 작성한 뒤, 저장할 때마다 Prettier 설정을 반영하여 코드 포맷팅이 적용됩니다.
만약 코드 포맷팅이 자동으로 이루어지지 않는다면 두 가지 사항을 확인하도록 합니다.

1. VS code에서 저장 시 자동으로 포맷팅하는 기능인 Format on Save가 활성화되어 있는지 확인합니다.
2. Default Formatter가 Prettier가 지정하는 값인 esbenp.prettier-vscode로 설정되어 있는지 확인합니다.

 

Prettier를 이용하여, 개인적으로는 가독성을 높여 코드를 작성하는 맛을 올려보세요.
그리고 팀적으로는 스타일 통합을 기반으로 더 나은 팀워크와 생산성을 달성할 수 있습니다!