[Javascript] Prettier ( 코드 서식 관리 도구 )

Prettier

 

Prettier는 코드 서식을 관리 해주는 패키지다

 

Prettier 사용 준비

# Prettier를 debDependency로 설치합니다.
yarn add prettier -D

 

위 명령어를 터미널에 입력해 prettier를 설치한다. ( D = 개발 환경 전용 )

 

Prettier 설정파일 추가

.prettierrc.json 기본 설정

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "all",
}

 

• printwidth : number ( 한 줄에 최대 글자수를 정의 )
• tabWidth : number ( Tab에 대한 스페이스 수를 정의 )
• singleQuote : bool ( 따옴표를 쌍 따옴표 (") 사용 여부 )
• trailingComma : "all" ( 여러 줄을 사용할 때, 후행 콤마 사용 )

스크립트 추가

Prettier를 보다 편리하게 사용할 수 있도록 package.json 파일에 스크립트를 추가한다.

이를 통해 터미널에서 간단한 명령만으로 Prettier를 실행할 수 있다.

 

"scripts": {
  "format": "prettier --write *.js **/*.js"
},

 

위 코드를 package.json에 입력한다. 이 스크립트를 실행하면 프로젝트 내의 모든 .js 파일을 대상으로 .prettierrc.js에 설정된 값을 바탕으로 Prettier를 실행하게 된다.

 

Prettier 실행

# package.json에 작성된 format 스크립트를 실행합니다.
yarn run format

 

위 명령어를 터미널에 입력하면 yarn run이 package.json에 작성한 스크립트를 실행한다. ( format은 package.json에 추가한 스크립트 이름 )