프론트엔드 로드맵 33 - code Formatters : Prettier프리티어

Code Formatter 코드 포맷터는 에디터에서 보다 효율적이고 가독성 좋게 코드를 작성하기 위한 확장 extention 기능이다.

 

대표적인 formatter로 Eslint와 prettier가 있는데, 보통 두가지를 함께 사용한다. (기능이 비슷한 듯보이나 다르다)

prettier는 들여쓰기를 맞춰주고, 세미콜론이나 콤마가 빠진 부분에 넣어줌. 그리고 '' 와 ""의 사용을 통일시켜준다. 여러명이서 협업을 해야하는데 코딩 스타일이 다를 경우 하나로 통일시켜주는데 도움이 된다.

 

javascript(ecma2017 최신버전까지), JSX, angular, vue, typescript, css, HTML, JSON, GraphQL

,markdown, yaml 등을 지원하고 있다.

 

Prettier는 작성자가 남긴 기존의 스타일들을 전부 지우고 모든 코드에 똑같은 스타일이 적용되도록 한다.

 

 

<설치방법>

$npm install prettier 또는 $yarn install prettier

 

프로젝트의 root 폴더에서 .prettierrc 파일을 열어

{     "singleQuote": true, //문자열에 들어갈 쿼터는 무조건 싱글쿼터 ''     "semi": true, // 코드 끝에 ; 붙일 것인가      "tabWidth": 2,  //들여쓰기     "trailingComma": "all",   객체나 배열 작성 시 value 뒤에 쉼표를 붙인다     "printWidth": 80 //한 줄이 80칸이 넘지 않도록 한다. }

위와 같이 작성 후 저장한다. 이후 코드 작성하다 저장만 하면 위와 같이 자동 변화한다.

더 다양한 옵션 보러가기

 

**에디터 사용

에디터(VS code이용)의 extension에서 > prettier 패키지를 검색후 설치하면 된다. 이후 재시작해 설정을 들어가면 수정이 가능해진다.

 

 

참고 사이트 : https://prettier.io/