prettier 설정하기.

prettier란

js는 생각보다 정렬에 자유도가 높다. 누구는 tab를 사용할 수도, 누구는 space를 사용할 수도, 너비가 2칸일 수도, 한 줄에 최대 80자까지 등등 사람마다 코딩 스타일이 모두 다르다. 본인의 코딩 스타일이 일관되지 않을 때도 있다. 이런 경우에 강제적으로 정해놓은 규칙에 맞게 정렬을 도와주는 프로그램이 prettier이다.

 

세팅

각설하고 세팅을 시작해보자. prettier를 받는 방법에는 두가지 방법이 있다.

1. npm으로 설치하는 방법

2. vscode의 익스텐션으로 설치하는 방법

여기서 우리는 vscode 익스텐션으로 편하게 설치해보려고 한다.

 

prettier 익스텐션 설치

1. 왼쪽의 extension, 한글로 확장을 클릭한다.

2. prettier를 검색한다.

3. Prettier-Code formatter를 선택한다.

지금 이미지에서는 이미 설치했기 때문에 사용 안 함이 뜨지만 설치를 안했다면 install이 뜰 것이다. install을 눌러주자!!

 

설정

나는 설치만 하면 알아서 세팅되어 알아서 해결될지 알고 있었다. 하지만 세부적인 세팅도 해줘야한다.

1. 설정창으로 들어간다. (mac에서는 cmd + ,로 들어갈 수 있다. 윈도우는 ctrl + ,)

2. 왼쪽 확장탭을 클릭하고 아래로 내려가면 prettier탭이 있다. 클릭하자.

3. 원하는 format으로 세팅할 수 있다. json형식으로 세팅을 하고 싶으면 아래 이미지의 빨간 부분을 클릭하자.

이 json파일에서 세팅을 할 때에 어떤 옵션들이 있는지 알아보기 위해선 아까 prettier를 install했던 창으로 가서 찾아 볼 수 있다.

각 역할에 대해서는 검색해보자.

이건 내가 세팅한 파일이다. 

 

마지막 세팅

나는 여기서 끝! 이라고 생각했다가 계속 세팅이 안된 상태로 사용했다.(후우)

중요한건 여기다.

맥에선 cmd + shift + p, 윈도우에선 ctrl  + shift + p로 명령 팔레트를 열고 format document를 검색하자

저 문서 서식을 클릭하고

Prettier - Code formatter를 클릭해주자.

 

그럼 이제 정말로 세팅이 완료된 것이다.

js파일로 들어가 코드를 막 짜보면 알아서 줄을 정리해준다. 

너무너무 편하다..

 

끝