React 프로젝트에 Prettier 적용하기

프로그래밍 세계에는 사용해도 되고 안해도 되지만, 사용하면 생산성(또는 그 외의 장점들)을 높여주는 도구들이 굉장히 많다. 그리고 이런 도구들을 하나씩 적용해 볼 때 느끼는 소소한 재미가 있다. 지금 소개할 prettier가 그렇다.

이 도구의 이름은 많이 들어봤겠지만 개발 환경 설정이 언제나 그렇듯 헷갈리고 익숙하지 않은 부분이 있기 때문에, 간단한 개념 정리와 함께 React 프로젝트에 prettier 적용하는 방법을 정리하고자 한다.

1. Prettier가 뭔가요?

보기 좋은 떡이 먹기도 좋다는 속담처럼 코드에서도 가독성은 무척 중요하다. Prettier 공식 홈페이지에서 중앙에 있는 TRY IT OUT 버튼을 눌러보면 아래 이미지와 같은 화면이 나오는데 왼쪽 보다 오른쪽에 있는 코드가 훨씬 잘 읽힐 것 이다. 잘 보면 코드의 문법 자체는 전혀 달라지지 않았지만 어디서 띄어쓰기나 Enter를 하는지 등 코드의 스타일에 대한 것만 달라진 것을 알 수 있다.

prettier 공식 홈페이지의 TRY IT OUT 화면

출처 : prettier 공식 홈페이지

A: Tab은 4칸으로 띄우자
B: 아니, 나는 2칸으로 띄우는데?
A: 문자열은 “” 로 감싸는게 어때?
B: 나는 ‘‘로 감싸는게 좋아
A: 변수 선언할 때 마다 ;을 붙이자
B: 아니.. 굳이 뭐하러?

가독성 문제와 더불어 사람마다 코드를 짜는 스타일이 다르기 때문에 프로젝트의 규모가 커지고 참여하는 사람이 늘어날수록 규칙을 정해 스타일을 통일 시키는 것이 좋다. Prettier는 개발자가 작성한 코드를 미리 정해둔 스타일 규칙에 맞게 변환해주는 Formatter이다.

관련 블로그를 찾아 보다보면 누구는 VScode extension 으로 설치했다고 하고 누구는 npm package로 설치했다고 하고, 또 누구는 npm package를 먼저 설치 후 VScode extension을 설치했다고 한다. 검색해보면서 이 부분이 꽤 헷갈렸어서 나름대로 정리해봤다.

2. CRA(Create React App)에 Prettier 적용하는 방법

2-1. VScode extension로 prettier 설치하기

자신이 사용하는 코드 에디터 (ex. VScode)와 연동해서 사용하고 싶고, prettier 세팅도 가볍게 하고 싶다면? VScode extension을 통해 다운로드 하자.

prettier VScode extension 설치 방법

내가 코드를 저장(Ctrl + S) 할 때마다 prettier로 코드를 변환하고 싶은 경우이다. npx create-react-app my-app로 기본적인 리액트 프로젝트를 만들고, 해당 프로젝트를 VScode 에디터로 연 후 위의 이미지의 각 step에 따라 prettier를 extension 으로 설치 하면 된다.

스크린샷 2020-07-04 오후 6 04 47

설치를 완료했으니 이제 prettier가 어떻게 스타일을 바꾸게 할 것 인지 규칙을 정할 차례 이다. step5 까지 따라한 후에 보이는 창에서 체크박스로 설정할 수도 있지만, step6으로 setting.json 파일 내에서 설정 하는 경우가 많다. ~~(개발자들은 체크박스 보다 json 형식에 더 익숙해서 그런 듯)~~

{
  "workbench.colorTheme": "Monokai Pro (Filter Octagon)",
  "workbench.iconTheme": "Monokai Pro (Filter Octagon) Icons",
  "editor.fontWeight": "500",
  "editor.fontFamily": "Ubuntu Mono derivative Powerline",
  "editor.fontSize": 17,
  "window.zoomLevel": 1,
  "terminal.integrated.fontSize": 15,
  // 여기서부터 추가함
  "javascript.format.enable": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.arrowParens": "avoid",
  "prettier.tabWidth": 2,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.trailingComma": "es5"
}

위는 내가 prettier 관련 설정을 추가한 setting.json 파일이다. 각 설정이 어떤 기능을 의미하는지는 검색해서 찾아보며 나에게 맞는 규칙을 적용하는 것을 추천한다.

Default Formatter

Prettier extension의 Default Formatter 설명

출처: Prettier extension의 Default Formatter 설명

VScode(코드 에디터)는 기본적으로 Formatter 기능을 가지고 있다. 그리고 prettier 이외에도 Beautify 등 Formatter 기능을 하는 다른 extension도 있다. 따라서 우리가 지금 다운로드 받은 prettier를 VScode의 기본 Formatter로 설정해줘야 되었기 때문에 setting.json 에 "editor.defaultFormatter": "esbenp.prettier-vscode" 옵션을 추가했다.

vscode-singlequote

결과적으로 문자열을 쌍따옴표로 감싸고 저장(Command + S)했더니 자동으로 홀따옴표로 변경된 것을 볼 수 있는데 이 외에도 다른 설정들도 모두 잘 적용 된 것을 확인할 수 있었다.

2-2. npm으로 prettier 설치하기

VScode extension 으로도 prettier를 사용할 수 있는데, npm으로 설치할 수 있는 prettier 모듈은 언제 사용할까? VScode의 prettier extension 문서를 읽어보면서 알 수 있었다.

Prettier Resolution과 Plugins

Prettier extension의 Prettier Resolution 설명

출처: Prettier extension의 Prettier Resolution 설명

VScode의 prettier extension은 실행할 때 로컬이나 글로벌 환경에 npm으로 다운로드 받은 prettier module이 있는지 먼저 확인한다. 그리고 로컬과 글로벌 환경에 모두 prettier module 이 없다면, extension이 내장하고 있는 prettier를 사용한다.

prettier module은 여러 세팅이 자동으로 되어 있는 plugins을 여러 개 제공하는데, 만약 이 plugins을 사용하고 싶으면 npm package를 통해 prettier를 다운로드 받으면 된다. (이 때 주의할 점은 global하게 설치하지 말고 꼭 local에 설치!)

yarn add prettier --dev --exact // or npm install --save-dev --save-exact prettier

따라서

VScode와 연동도 하고 싶고 prettier plugins도 같이 사용하고 싶다면? prettier module과 VScode prettier extension 모두 설치하여 설정한다.
VScode와 연동하지 않고 prettier만 사용하고 싶다면? cli를 통해 prettier를 실행하거나 파일의 변경 사항을 commit 하기 전에 prettier를 적용되도록 하고 싶은 경우이다. prettier module과 그 외 상황에 따라 필요한 다른 module(husky, lint-stage 등)를 추가로 설치하여 설정한다.

3. Configuration 방법

prettier module 만 사용 하는 경우에는 앞서 2-1 에서 설명한 VScode의 setting.json에 prettier extension 설정을 추가할 수 없기 때문에 별도의 Configuration File이 필요하다. prettier module 공식 문서의 Configuration File 페이지를 참고. package.json 파일에 “prettier” 라는 key를 추가하는 것도 쉬운 방법이지만 일반적으로 환경 설정 파일은 json이나 yml 형식을 많이 사용하기 때문에 익숙해지는 것이 좋다.

prettier extension의 Configuration 설명

VScode extension 입장에서도 prettier module 이 있을 때와 없을 때 등의 여러 상황을 위해 다양한 환경 설정 옵션을 제공한다. 1) VScode의 기본 설정 파일인 setting.json, 2) .prettierrc 파일과 같은 prettier module의 환경 설정 파일, 3) editor config 파일 세 가지인데, 우선 순위는 2) 3) 1)의 순서로 높게 적용 된다.

참고: 해당 글에서는 나를 포함한 대다수의 프론트엔드 개발자들이 코드 에디터로 VScode를 사용하기 때문에 VScode 기준으로 이야기했다. 만약 다른 에디터를 사용한다면, 해당 에디터의 extension 에서 prettier를 찾아보면 비슷한 방법으로 적용할 수 있을 것 이다.