.prettierrc 설정

실전 프로젝트를 진행함에 앞서 이제 6주 동안 다른 사람들과 코드를 작성해서 공유를 많이 할 텐데

각자의 코드 작성 스타일이 다르면 나중에 깃 허브에서 충돌이 많이 날 것이다.

이를 대비해서 최대한 남의 코드는 건들지 않겠지만 불가피하게 남의 코드나 파일을 수정할 경우 최대한 같은 스타일을 사용한다면 충돌이 날 확률도 낮아질 것이다.

또한 나중에 보았을 때도 모든 코드가 같은 설정으로 통일되어있다면 보다 좋은 가독성을 주고 안정감을 주기 때문에

협업을 하기 전엔 코드 컨벤션을 통해 팀끼리 코드 스타일 설정을 맞추는 것이 좋은 협업의 지름길이라고 생각한다.

 

사실 이 글을 쓰기 전 컨벤션이 정확히 무엇인지 잘 모르고 필자도 prettier만 사용해서 스타일만 정해서 협업에 들어갔다.

이 글을 쓰면서 생각보다 더 많은 설정 작업을 통해서 컨벤션 작업을 하지만 그것은 조금 더 나중에 다뤄보기로 하고

기본적인 .prettierrc만 정리해보도록 하겠다.

 

일단 기본적으로 vscode 사용 시 모든 팀원이 prettier를 설치해야 한다.

1. vscode extensions에서 prettier를 다운로드하여 설치를 해준다.

2. 가장 최상단 위치에 .prettierrc 파일을 만들고 안의 내용을 팀원들과 상의하여 작성한다.

 

이렇게만 해도 코드 공유 시 충돌 나는 부분이 굉장히 적어진다. 나중에 가면 좀 더 세부적으로 eslint와 prettier를 설정해준다면 좀 더 완벽한 컨벤션이 된다고 한다.(나중에 공부해서 적용해보고, 정리해보기로)

 

// .prettierrc 파일

{
  "trailingComma": "es5", // 여러줄을 사용할 때, 후행콤마 사용 방식
  "tabWidth": 2, // 탭 너비
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // ''사용 여부
  "arrowParens": "always" // 화살표 함수 괄호 사용 방식
}

 

 

더 많은 설정은 아래 링크를 참고하면 좋을 것 같다.

.prettierrc 기본 설정

좀더 완벽한 컨벤션을 한다면 아래 링크 참고

[협업] Prettier & ESLint, Airbnb Style Guide로 코드 컨벤션 설정하기