[VScode] 포맷팅 확장팩인 프리티어(Prettier)를 활용하여 코드 스타일을 설정해보자.

 

오늘은 VSCode에서 제공하는 확장팩 중 유용한 확장팩인 프리티어(Prettier)에 대해 정리해보려고 한다.

 

 

프리티어(Prettier)란?

 

프리티어(Prettier)는 개발자가 작성한 설정파일을 통해
개발자가 작성한 소스코드의 스타일을 자동설정 해주어, 코드 포맷의 통일성을 유지 시켜주는 라이브러리이다.

 

 

프리티어(Prettier)를 사용하는 이유

 

개인 프로젝트를 하더라도 그날 그날의 기분이나 뭐에 따라 코드스타일이 달라지기도 하고(아님 말고..)
팀 프로젝트 같은 경우에는 개발자마다 코드 작성 스타일이 다르기 때문에
각 기능이나 서비스마다 코드가 너무 다르다. 이렇게 되면 나중에 코드리뷰를 진행하거나 유지보수를 할 때
각기 다른 코드 스타일로 인해 이해하기 어렵다는 문제가 있다.

결론은 각 개발자간의 코드 포맷의 통일성 유지를 위해 사용한다는 것이다.

 

 

 

VSCode에서 프리티어(Prettier) 적용 및 테스트

 

npm Prettier

1) npm으로 prettier 라이브러리 설치

npm i --save-dev prettier

 

 

 

2) VSCode에서 Prettier 확장팩 설치

 

 

 

3) root 경로에 .prettierrc.json 파일 생성 및 설정 코드 작성

 

 

샘플코드

{
    "semi": false, //세미콜론을 사용하지 않음 (세미콜론 작성후 저장시 세미콜론 제거)
    "printWidth": 80, //줄바꿈 폭 (텍스트의 width가 80이 넘어갈 시 줄바꿈)
    "singleQuote": true //싱글쿼터 사용 (더블쿼터 -> 싱글쿼터로 전환)
}

 

root 경로에 .prettierrc.json을 생성하는데, 반드시 root 경로가 아니어도 된다.
.prettierrc.json은 해당 파일의 경로 및 하위 디렉터리에 있는 파일들에 대해서만 스타일을 자동설정 하기 때문에
root 경로에 두면 모든 파일에 대해 포맷팅을 할 것이고, src 경로에 두면 src의 하위 디렉터리에 있는 모든 파일에 대해 

포맷팅을 하기 때문이다.

Prettier Doc에서 위의 샘플코드 외에도 다양한 옵션을 제공하고 있으니 필요한 사람은 아래 링크에서
필요한 옵션을 골라 설정해주도록 하자.

 

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

Prettier · Opinionated Code Formatter

 

 

결과

결과를 보면 더블쿼터가 싱글쿼터로, 세미콜론은 제거 된 것을 확인 할 수 있다.