Prettier 설치와 기존 파일 포맷팅

설치

npm i --save-dev -g --save-excat prettier

 

현재 프로젝트에서만 사용한다면 -g는 생략해도 된다.

--save-exact로 정확한 버전을 설치한다.

 

설정

루트경로에 .prettierrc.js 혹은 .prettierrc.json 파일을 만들어준다.

{
  "singleQuote": true, // single 쿼테이션 사용 여부
  "semi": true, // 끝에 세미콜론 사용 여부
  "tabWidth": 4, // 탭 너비 
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 
  "printWidth": 120, //  줄 바꿈 할 폭 길이
  "arrowParens": "avoid" // 화살표 함수 괄호 사용 방식
}

설정 가능한 다른 옵션들은 공식사이트에서 확인 가능합니다.

https://prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

vscode의 setting.json에서 아래와 같이 추가하면

파일 수정 후 저장시에 자동으로 포맷팅됩니다.

"editor.formatOnSave": true,

 

포맷팅

기존에 프리티어 옵션이 지켜지지 않은 파일들을 아래와 같이 찾을 수 있습니다.

npx prettier --check src/*

결과

특정 확장자만 찾는다면 아래와 같이 쓸 수 있습니다.

npx prettier --check src/*/*.{js,vue}

결과

 

npx prettier --write .

위처럼 실행해주면 전체 프리티어 포맷팅이 완료됩니다.