prettier 셋팅, eslint와 같이 사용방법

 

사용 계기

기존에 예전에 있던 분이 eslintrc를 구축하여 그대로 쓰고있었는데

vscode를 사용할때는 .vscode에 extensions.json과 settings.json을 통해 eslint를 기본 formatter로 지정하였지만 팀원들은 vscode가 아닌 웹스톰으로 사용하기때문에 해당 formatter 설정이 들어가지 않았고 그로인해 코드 정렬시 다르게 적용되어 PR 리뷰를 할때 불필요한 + , - 줄이 생기게 되었고, 리뷰하는데 불필요한 에너지와 시간을 쏟게 되는것을 방지하고자 prettier를 설정하기로 했다. (아래 스크린샷과 같은 PR시 불필요 변경사항들)

작동조건

prettier를 사용하는 방법은 간단하다. 다음과 같은 조건을 다 만족해야지만 정상 작동한다

1. prettier 라이브러리를 package를 통해 설치한다

2. extensions(plugin)을 통해 prettier를 설치한다.

3. 원하는 커스텀을 위해 .prettier.json 파일을 만들고 규칙을 넣는다.

 

위 해당 번호 설명

1. 라이브버리르 설치하고 터미널에서 npx prettier . --write 또는 npx prettier --write 원하는경로를 할경우 수동으로 포멧팅이 가능

2. extensions에 prettier를 설치시 IDE에 plugin이 되어 1번과 같이 수동으로 입력하지 않고도 적용 가능(단, save시 적용이나 단축키 설정시에 가능)

3. 2번에서 적용된 기본 prettier가 아닌 커스텀을 하여 팀의 규칙을 적용하기위해 사용한다.

이슈사항

문제는 .vscode에 작성된 셋팅파일들인데 prettier사용 이전엔 ESLint로 셋팅되고 formatter로 사용했지만 이 파일들이 있으면 prettier가 정상 작동하지 않기 때문에 파일들을 삭제 해줘야한다.

Eslint + prettier 적용방법

만약 ESlint 규칙에 커스텀한 prettier를 넣고싶다면 .eslintrc.js 에 extends 안에 'plugin:prettier/recommended' 를 넣고 rules 부분에 'prettier/prettier' : 'error' 또는 'warn' 를 해준다면 우리가 설정한 prettier 대로 eslint에서 빨간줄로 에러처리하거나 노란줄로 경고를 해준다. 

이때 필요한것이 eslint-config-prettier 와 eslint-plugin-prettier 라이브러리 이다.

eslint-config-prettier의 경우 eslint의 포메팅룰을 삭제를 해주고

eslint-plugin-prettier는 eslint에 prettier 포매팅 기능을 추가해준다.

 

우리팀의 목적은 ESlint까지 적용하고자 한게 아닌 PR 리뷰에 대한 효율을 증가하기위함이므로 eslint에까지 규칙을 넣어 엄격하게 하지않기로하였다.