webstorm 1분만에 prettier 설정하기

 

 

webstorm에서 prettier 설정하는 법

 

 

 

1. prettier 패키지 추가

일단 패키지를 추가한다. yarn을 사용해서

$ yarn add prettier

로 추가했다.

 

2. config 파일 추가

package.json과 같은 루트에 .prettierrc 파일을 추가한다.

내가 사이드프로젝트에서 주로 사용하는 설정파일은 아래와 같다.

 

{
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "jsxBracketSameLine": false
}

 

3. IDE 설정 추가

설정 > preferences 에서 prettier를 검색한다.

 

사용할 파일들을 설정해주고, 저장할때마다 실행시켜주기 위해 체크체크 해줬다.

 

패키지를 직접 선택해야하는데 위에서 설치한 node_modules에 있는 prettier 패키지를 직접 선택해준다.

 

 

그리고 코드 작성해보고 command + s (저장)을 눌러보면 prettier 설정대로 동작하는 것을 확인할 수 있다.