[JavaScript] WebStorm Prettier 설치, 적용 하는법

JavaScript 로 코드를 작성하다보면 혹은 팀끼리 개발할 때 코드 컨벤션에 맞춰야할 때가 있다.

물론 WebStorm 에도 맥OS 기준으로 option + alt + L 을 누르면 코드 정렬이 되긴 하지만

따로 설정도 해야하고 하나의 컴포넌트에 여러개 옵션들을 넣을 때 자동으로 줄바꿈이 되지 않아서 옆으로 길어지는 경우가 있다.

 

이때 사용 할 수 있는 것이 prettier 다.

 

Prettier 설치하기

Preferences - Plugins - Marketplace - Prettier - install

 

내가 하고있는 프로젝트에서 상단의 Preferences 로 진입해주자

이후 좌측 사이드 메뉴에서 Plugins - Marketplace 에서 Prettier를 검색 후 설치.

 

그 다음 터미널에서 프로젝트 폴더로 가서 npm install prettier 를 해준다. 또는 npm i --global prettier

 

그리고나서 WebStorm 의 설정으로 온다음 Languages & Frameworks - Prettier 로 가면 위와같은 설정이 나오는데

이때 Prettier package 가 자동으로 잡혀있는 경우도 있지만 아닌 경우에는 우측 설정을 눌러서 경로를 지정해준다.

경로는 내가 하고있는 프로젝트의 node_modules/prettier 를 선택해주면 된다.

그리고 아래에는 어떤 확장자 파일에 적용할 것인지 입력해주면 되는데 캡쳐에 보이는게 기본 설정이다.

아래 두 개는 WebStorm의 기본 코드 정렬 기능과 같은 버튼을 누르면 정렬 할 것인지 여부이고,

그 아래는 저장할 때 정렬을 따로 하지 않고 저장해도 자동으로 적용되는지 여부이다.

나는 둘 다 했다. 내가 의식적으로 정렬을 해줄 때가 있지만 아닐 때도 있기에 둘다 했다.

 

그리고 코드로 돌아와서 option + alt + L 또는 저장을 하면 기존의 코드였던 이 상태가

 

이렇게 정렬 된다.

 

코드 내용은 작성 도중에 캡쳐한 것이지 그냥 넘어가달라

 

이렇게 오늘의 Prettier 적용하기 끝.