[Prettier] Prettier Webstorm 에 적용하기

팀원들과 프로젝트 도중 다른 IDE를 사용하여 코드의 정렬이 문제가 되었다.

나는 Jetbrain 툴에 익숙하여 webstorm 을 사용하였지만 팀원들은 vscode를 사용하였기에 prettier로 코드 포맷을 통일하기로 하였다.

이미 vscode로 작성된 코드가 대부분이었기 때문에 vscode의 정렬 포맷으로 prettier 설정파일을 만들어 webstorm에 적용하기로 했다.

적용하기

1. 일단 이전까지는 prettier를 사용하지 않았기 때문에 프로젝트에 prettier 패키지를 먼저 설치하였다.

   npm install prettier

2. vscode 파일 포맷을 기반으로 prettier 설정 파일을 생성하였다. 파일이름은 .prettierrc 이고 생성은 Prettier Config Generator 페이지의 기능을 이용했다.

   Prettier Config Generator

   위 사이트에 만든 최종 config 파일이다.

   {
     "printWidth": 80,
     "tabWidth": 2,
     "useTabs": false,
     "semi": true,
     "singleQuote": false,
     "trailingComma": "es5",
     "bracketSpacing": true,
     "jsxBracketSameLine": false,
     "arrowParens": "always",
     "requirePragma": false,
     "insertPragma": false,
     "proseWrap": "preserve"
   }

3. IDE(Webstorm) 설정하기

   설정(Command + , ) 에 들어가 Prettier 를 검색한다.

   

   Manual Prettier configration을 선택하여 직접 설정을 추가 하도록 한다.

   

   prettier 패키지 위치는 본인의 프로젝트 노드 모듈에 설치한 prettier 패키지 경로를 설정하면 된다.

   만약 코드 정렬 단축키 (Option + Command + L) 로 Prettier 정렬를 사용하고 싶다면
   Run on ‘Reformat Comde’ action 옵션에 체크 하면 되고

   저장할때 정렬 기능이 자동으로 실행되게 하고 싶다면

   Run on save 옵션에 체크 하면 된다.

4. 동작 확인하기
   

참조 문서

Prettier | WebStorm

webstorm 1분만에 prettier 설정하기