<React 파헤치기-02> Prettier를 적용해보자!

Prettier 란?

프로젝트의 코드 입력 스타일을 동일하게 유지시켜주는 플러그인으로 현업에서 자주 사용된다.

 

튜토리얼

1. react의 extension(왼쪽 nav bar 맨 아래)에서 Prettier를 검색한다.

2. Prettier - Code formatter를 선택하고 Install을 눌러 플러그인을 설치한다.

3. 설치 후 위 화면과 같이 Reload Required 버튼을 눌러 VSCode를 재실행한다.

4. 재실행 후 프로젝트 폴더에 Prettier 설정 파일을 생성하여(파일 이름에 반드시 온점 '.'을 포함) 아래와 같이 입력한다.

 

prettier를 자동으로 적용되도록 만들어보자

Preference-Settings 로 들어가 setting의 검색창에 'formatOnSave'를 검색하면 아래와 같이 Format On Save 설정을 볼 수 있다. 해당 설정의 체크 박스를 눌러준다.

 

적용 결과

아래 화면에서는 11, 13, 20번 째 줄에 세미콜론이 빠졌다.

아래 화면은 위 파일의 저장 후의 모습이다. 9, 11, 20번 째 줄에 세미콜론이 생긴 것을 확인할 수 있다.

 

*위 튜토리얼을 따라해도 적용이 안되는 경우, settings 검색창에 Default Formatter 검색 후 Prettier로 바꿔주자!