VSCode 설정 - Prettier

Prettier?

Visual Studio Code에서 제공하는 Code formatter 확장 프로그램이다. 협업 시 코드 형식을 맞추는데 유용하게 사용된다.

 

설정 방법

1. Prettier 설치

VSCode를 실행한 후, 확장에서 Prettier를 검색 후 다운로드 한다.

2. Setting에서 JSON 파일 수정하기

좌측 하단 톱니바퀴를 눌러서 setting에 들어간다.(단축키 : Ctri + ,)

그 후, 우측 상단에 Open Settings (JSON)을 클릭한다.

그 후, 원하는 양식을 추가하면 된다.

각 줄당 의미하는 바는 다음과 같다.

 

prettier.printWidth - 화면에 나오는 한 문장의 길이(최댓값)

prettier.tabWidth - tab으로 띄워지는 여백 길이

prettier.singleQuote - ' ' 사용하는지

prettier.trailingComma - 후행에 쉼표를 찍을지 결정(객체, 배열, 함수 등)

 

2.1. 위 설정이 끝난 후에 적용이 안 될 때

- setting에 들어가서 Format on Save를 검색한다.

체크해주면 된다.

 

- editor.defaultFormatter 확인

Prettier로 설정해 주자.

 

수정하고 싶은 설정이 있다면 추가로 설정해 주면 된다.

이제 입맛에 맞게 수정해 보자.