배경

react 프론트 코드에서 머지하는 과정에서 충돌이 발생했다 staging 에 cherry pick 해서 하나의 커밋이 존재 (Prettier 적용하지 않았던) dev 에서 이후 Prettier 를 적용하고 전체 코드가 변경되는 문제가 발생 Prettier 적용후 코드 라인이 변경되었고 dev 에서 staging 으로 머지하는 과정에서 충돌이 발생했다 그래서 Prettier plugins 에 대해서 알아보고 react 코드 작성 후 습관적으로 적용하려고 한다 문제는 모든 사람이 같이 관리하는 코드에 Prettier 적용했다면 다같이 사용해서 유지해야 하는거 같다

좀 더 체계적이고 공통화된 소스코드로 작업을 위해 적용해 보자!

Prettier 설치

npm install --save-dev --save-exact prettier

prettierrc.js 설정

touch .prettierrc.js

. prettierrc 파일 설정 https://adjh54.tistory.com/20

prettierrc.js 실행

yarn prettier --write .

적용되었는지 확인

yarn prettier --check . 실행시 다음 문구 보임

Checking formatting...
All matched files use Prettier code style!
✨  Done in 1.34s.

. 으로 하면 프로젝트 전체 코드를 바꿔버린다

리액트 프로젝트중 src 폴더만 확인하고 바꾸도록 아래 코드를 package.json 에 추가해서 사용

"format:fix": "prettier --write ./src",
    "format": "prettier --check ./src"

IntelliJ Prettier 설치

Preferences > Plugins > Prettier를 검색해서 설치 Plugins 실행 : Ctrl+Alt+S

Windows and Linux :Alt-Shift-Ctrl-P