Prettier로 코드 포맷 통일하기

Prettier란?

현재 가장 널리 사용되고 있는 코드 포맷팅 툴이다.

홈페이지에 나와 있듯이 다양한 언어를 지원하며,

출처: https://prettier.io/

대부분의 IDE에서 Plugin으로 사용할 수 있다.

출처: https://prettier.io/

코드 포맷팅이랑?

혼자 코딩을 할 때는 잘 모르겠지만, 2명 이상과 함께 작업을 하다보면 서로의 코드 작성 스타일이 다르다는 것을 느낄 때가 있을 것이다.

사소해 보일 수 있지만, 코드를 작성하는 입장에서 굉장히 거슬리는 경우가 많다.

그래서 협업을 할 때에는 서로의 코드 작성 스타일을 사전에 합의하고 진행해야 된다.

코드 작성 규칙 (Code Convention)

일반적으로 많이 사용하는 규칙들은 다음과 같다.

• 네이밍 (파일명, 변수, 함수 등...)
• 주석
• 폴더 구조
• 아키텍쳐
• 코드 포맷팅

코드 포맷팅

그 중에서 Prettier는 코드 포맷팅을 보다 효율적으로 할 수 있게 도와주는 툴이다.

아래와 같이 많은 코드 포맷팅 규칙을 정했다고 하자.

처음에는 신경써서 작성을 하려고 하겠지만, 시간이 지날 수록 기억이 나지 않거나 귀찮아서 포맷팅은 뒷전에 두게 된다.

 

 

Prettier 사용하기

VS Code Plugin 설치

Extension에서 prettier를 검색하거나 아래 링크로 들어가 설치한다.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier Plugin 세팅

VS Code Setting으로 이동한다.

• Default Formatter를 검색한 후, Prettier로 설정한다.

• Format On Save를 검색한 후 체크한다.
  저장할 때 자동으로 포맷팅을 해준다.

• Prettier: Require Config를 검색한 후 체크한다.
  prettier 설정 파일이 있을 때만 포맷팅을 한다.
  파일 없이 Plugin 설정만으로도 포맷팅이 가능한데, 환경에 따라 달라질 수 있기에 파일로 관리하는 것을 추천한다.

Prettier 파일 생성

프로젝트 루트에 새 파일을 만든다. 이름은 다양하게 사용할 수 있다.

- A "prettier" key in your package.json file.
- A .prettierrc file written in JSON or YAML.
- A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
- A .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
- A .prettierrc.toml file.

개인적으로 .prettierrc에 JSON 형태로 저장해서 사용한다.

.prettierrc 파일 예시

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true
}

- singleQuote: 문자열 입력 시 쌍따옴표(") 대신 따옴표(') 사용
- semi: 코드 끝에 항상 세미콜론 추가
- useTabs: 탭 사용
- tabWidth: 탭을 사용하지 않는다고 설정했을 때 탭을 누르면 추가 할 스페이스 개수
- trailingComma: 객체, 배열 등의 마지막 항목에 콤마(,) 추가
- printWidth: 한 줄에 최대 표시되는 글자수 설정 
- bracketSpacing: 괄호 안에 데이터가 있을 때 공백 삽입

더 다양한 옵션을 공식 홈페이지(Prettier - Options)를 통해 확인할 수 있다. 

 

Prettier를 이용한 코드 포맷팅 예시