협업을 위한 Prettier 설정하기

 

prettier! 자바스크립트 공부를 시작하면서 계속 사용해오던 코드 포맷터다. 크게 신경쓰지 않아도 자동으로 코드 스타일을 정리해줘서 정말 편리하다. 지난 미니 팀프로젝트에서 팀원분의 제안으로 prettier를 다함께 설정해 시작했지만, 개인마다 다른 환경과 확장 프로그램 영향인지 배열만 다른 코드가 변경사항으로 push/pull 되는 경우가 종종 있었다.

 

제대로 적용된다면 너무 편할 것 같아서 다음 팀프로젝트에는 적용해보고싶었는데, 개인 프로젝트를 시작하는 김에 협업용으로 설정하는 방법을 알아보았다.

 

 

패키지 설치

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

 

터미널을 통해 prettier 패키지를 설치한다.

 

 

.prettierrc.js 생성

echo module.exports = {}> .prettierrc.js

 

.prettierrc.js를 생성 후 파일 내용에 포캣팅할 옵션들을 설정한다.

 

예시

module.exports = {
    trailingComma: 'es5', // 객체나 배열 등 마지막 줄의 콤마 여부(ES5부터 허용)
    tabWidth: 2, // 탭너비 2로 설정
    semi: true, // 세미콜론 자동수정
    singleQuote: true, // 큰따옴표를 작은따옴표로 자동수정
    printWidth: 60, // 줄바꿈할 길이 설정
};

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true
}

 

공식 레퍼런스 옵션 → playground에서 내가 적용할 옵션이 어떻게 나타나는지, 반대로 이렇게 코드 포맷팅을 하려면 어떤 옵션들을 써야하는지 확인하고 해당 옵션을 복사해올 수 있다.

Prettier · Opinionated Code Formatter

 

.prettierignore로 prettier 포맷터로 관리하지 않을 파일을 지정할 수도 있다!

 

실행하기

npx prettier --write .

prettier 실행하여 설정을 적용해준다!

 

 

settings.json 변경

"editor.formatOnSave": true,
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

js뿐만아니라 다른 파일에서도 prettier가 적용되도록 settings.json에 위 내용을 추가해준다

 

적용되지 않는 경우

1) HTML, 특정 언어에 적용되지 않을 때

js에는 적용되지만 html에는 계속 적용이 되지 않아서 한참을 헤맸다.. 🥲

html에 기본 포맷터가 html 기본 언어로 되어있어서 계속 다른 값이 적용되는 것이었다.

 

F1으로 Format document... 를 검색하고 기본 포맷터 구성을 선택해 prettier를 설정해준다.

아래 사진처럼 되어있어야 한다!

 

2) 저장해도 적용되지 않을 때

cmd + , 를 통해 설정으로 들어가고 format on save를 체크해준다.