[VSC] VSCode : 파일 저장할 때 Prettier로 자동 정렬 적용 설정 방법

VSCode로 작업을 하면서 파일을 저장하면 자동으로 소스코드가 정해진 코딩 스타일로 정렬해 주는 Prettier는 거의 표준처럼 사용하게 되었습니다. 새로 개발 환경을 설정하면서 VSCode를 설치하고 마켓에서 확장프로그램을 받아서 설치하는데 그중에 Prettier도 기계적으로 설치하게 됩니다. 

 

그런데 Prettier를 설치했는데도 파일을 저장할 때 코드가 자동 정렬되지 않는 현상이 발생했습니다. 설정을 해주면 동작하는데 자주 설정할 일이 없다 보니 자꾸 까먹게 되네요. 방법을 찾아서 정리해 둡니다.

---

1. Prettier 설치

소스 코드를 정해진 코딩 스타일과 일치하도록 자동으로 정렬하여 주는 프로그램인, 코드 포맷터(Code Formatter)로 수천만 명이 사용하고 있는 프로그램이 Prettier입니다. 

 

먼저 VSCode의 마켓에서 확장 프로그램을 설치합니다.

VSCode - Market Place : Prettier

 

1. VSCode 실행 후 왼쪽 탭에서 확장(Ctrl + Shift + X)을 클릭합니다.
2. 상단의 검색 창에 Prettier를 입력하고 검색합니다.
3. 검색 결과에서 Prettier - Code formatter를 클릭합니다.
4. 우측 창에 나타난 설명에서 설치(install)를 클릭합니다.
5. 설치 버튼 우측의 기어모양 아이콘을 클릭하고 메뉴에서 확장설정을 클릭하면 설정화면으로 넘어갈 수 있습니다.

2. 파일 저장 시 자동 포맷팅 설정하기

2.1 Format On Save 체크하기

VSCode - 설정 검색 : Format On Save

 

1. 단축키(Ctrl + ,)를 클릭하여 설정화면으로 들어갑니다.
2. 상단의 입력창에 'Format On Save'로 검색합니다.
3. Editor: Format On Save의 체크박스를 확인하고 체크합니다.

2.2 Default Formatter로 Prettier 선택

VSCode - 설정 검색 : Default Formatter

 

1. 단축키(Ctrl + ,)를 클릭하여 설정화면으로 들어갑니다.
2. 상단의 입력창에 'Default Formatter'로 검색합니다.
3. Editor: Default Formatter의 콤보박스를 확인하고 Prettier로 변경합니다.