project별로 prettier 설정하기 ( vscode )

들어가기에 앞서 

다른 사람들과 협업을 하다보면 프로젝트별로 설정을 하지 않으면 개발자마다 사용하는 에디터 사용환경이 다 제각각이라 혼선이 오는 경우가 상당히 많습니다. 이런 혼선을 피하기 위해서 보통 프로젝트별로 사용환경 설정하는데요. 오늘은 그 사용환경 중 prettier를 프로젝트별로 설정하는 방법에 대해 소개합니다. 참고로 이 방법은 vscode를 이용할 때를 기준으로 작성했습니다만. 다른 에디터도 크게 다를 것 같진 않습니다.

 

설정방법 

1. 프로젝트에서 locally 하게 prettier 설치 

프로젝트 루트경로로 이동해서 install 하면 됩니다.  ( -g 전역 설치가 아닙니다. ) 

npm, yarn, pnpm 등 원하는 pacakge manager 이용하면 됩니다. ( 공식 홈페이지 참조 : https://prettier.io/docs/en/install ) 

 

2.  .prettierrc.json 파일을 루트 경로에서 생성하고 해당 파일에 원하는 prettier 옵션 지정

.prettierrc.json은 prettier config file로 code 줄너비 ( printWidth ) 같은 설정을 기재하는 곳입니다. 

이 기재된 설정을 prettier가 읽고 그 설정에 맞게 코드를 포맷팅 합니다. 

 

3. (옵션)  .prettierignore file 루트 경로에 생성해서 prettier 코드 포맷팅 제외 파일 작성

코드 포맷팅을 제외하고 싶은 파일 or 경로를 입력하면 기재된 곳은 포맷팅 제외 됩니다. 

 

4. eslint와 같이 사용 하신다면 eslint-config-prettier 를 설치합니다.

설치 방법은  https://github.com/prettier/eslint-config-prettier 여기 들어가셔서 하단 installation 부분 확인하시면 알 수 있습니다. ( 1.Install eslint-config-prettier, 2. Add eslint-config-prettier to your ESLint configuration –  ... 요부분 따라하세요 ) 

 

5. 프로젝트별 vscode setting 설정하기 

프로젝트의 최상단 루트 경로에 .vscode 폴더를 생성하고 그 하위에 settings.json 이라는 파일을 만들고 아래와 같이 기재하세요. 하단 prettier.requireConfig: true 로 할 시 특정파일을 포맷팅 할 시 그 파일에서 가장 근접해 있는 prettier.json과 같은 config file의 설정값에 의존하여 포맷팅을 진행합니다.  

// .vscode/settings.json 

{
  "editor.formatOnSave": true, // ctr+s 로 저장시 해당 파일 알아서 포맷팅 
  "prettier.requireConfig": true // prettier 설정을 프로젝트 내부 .prettierrc.json 파일에서 가져옴
	
   // 필요한 vscode editor 설정 추가 기재
}

 

마무리

1 ~ 4 까지는 Prettier의 install 관련 document를 풀어서 쓴 글이오니 막히는 부분이 있으면 아래 참고에 적어둔 공식 문서를 확인하시면 됩니다. 5번에서 기재된 코드는 반드시 repository에 올려야 하는 거 잊지 마세요! 그래야 항상 공유되고 해당 프로젝트에서는 일관된 vscode 환경으로 작업 할 수 있습니다.  

참고 

https://prettier.io/docs/en/

Prettier · Opinionated Code Formatter