prettier 사용 방법

1) 프리티어 사용 준비

: 프로젝트에 prettier 설치프리티어는 실제로 여러분의 서비스를 구동시킬때 필요한 모듈이 아니고, 여러분의 코드 작성을 조금 더 편리하게 해주는 도구이므로 devDependency로 설치하겠습니다

npm i prettier -D

 

2) 설정파일 추가

module.exports = {
    printWidth: 110, //  줄 바꿈 할 폭 길이
    tabWidth: 4, // 탭 너비
    singleQuote: true, // single 쿼테이션 사용 여부
    trailingComma: 'all', // 여러 줄을 사용할 때, 후행 콤마 사용 방식
    jsxBracketSameLine: false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
};

 

app.js 파일이 있는 위치에 .prettierrc.js 라는 파일을 생성하고, 아래의 내용을 넣어주세요!

 

3) package.json 파일에 스크립트 추가

스크립트 추가<aside> 👉 package.json 파일에 있는 "scripts" 항목에 원하는 스크립트를 따로 추가해서 편리하게 단축키처럼 사용할 수 있습니다! 우선 아래의 내용에 있는것처럼 스크립트를 추가해주세요!

"prettify": "prettier --write *.js **/*.js"

prettify 위치 확인

📌 주의! 
scripts 내용 사이에는 예시처럼 항상 콤마(,)가 있어야 합니다!

만약 콤마를 빠트렸거나, 맨 마지막 항목에도 콤마를 넣었다면
정상적으로 동작하지 않을수도 있어요!

 

4) 스크립트 실행

npm run prettify

위 명령어를 터미널에서 입력해보세요! 만약 스크립트가 정상적으로 추가됐다면 아래와 비슷한 내용들이 주루룩 나올거예요!

---

prettier 사용법 끝~