#[vscode] prettier 설정하기

코드는 일관되고 가독성있게 작성하는게 매우매우 중요하다. 일관된 형식의 코드는 프로젝트 내에서 유지보수와 협업관계에 있어서 특히 빛을 보인다.

 

1. Prreiter ?

VSCode에서 "Prettier"은 코드의 가독성을 위해서 자동정렬해주는 도구 중 하나이다. 

- 코드 스타일 일관성 유지

- 가독성 향상

- 자동 형식 적용

- 설정 가능한 옵션 : 들여쓰기, 따옴표 , 줄 길이 등 커스텀 가능

 

2. 설정방법

1) vscode 에서 마켓플레이스 켜기

 -  왼쪽의 확장 버튼을 누르거나 [ctrl] + [shift] + [x] 를 누르면 아래와 같은 vscode에서 사용 할 수 있는 도구 모음이 나온다.

 

2) Prettier 검색 -> 설치

 

3) 설정 setting 

 - [ctrl] + [p] 를 누르면 위에 검색창에 포커스가 이동할 것이다.

  이때 >settings 를 검색해서 설정화면으로 이동한다.

 

4) Format on Save 선택

 

5) 규칙작성하기

프로젝트 루트에 .vscode 폴더를 생성하고 안에 settings.json 파일을 생성한다.

{
  "editor.formatOnSave": true,
  "[python]": {
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

 

 

정렬할 내용을 커스텀 하면 끝난다. 나는 python, html, js 코드의 기본 정렬만이 필요해서 원하는 언어를 따로 켜주었다.