[React] Prittier 적용하기

Prettier란?

코드의 가독성을 높이고 협업 시 코딩규칙을 통일시키는 것이 좋다.

Prittier는 개발자가 작성한 코드를 미리 정해둔 스타일 규칙에 맞게 변환해주는 Fommater이다.

 

VScode Extentions으로 설치하기.

1. 먼저 Prittier를 설치한다.

2. 설치가 완료되었으면 Prittier설정을 한다.

{
  "workbench.colorTheme": "Monokai Pro (Filter Octagon)",
  "workbench.iconTheme": "Monokai Pro (Filter Octagon) Icons",
  "editor.fontWeight": "500",
  "editor.fontFamily": "Ubuntu Mono derivative Powerline",
  "editor.fontSize": 17,
  "window.zoomLevel": 1,
  "terminal.integrated.fontSize": 15,
  // 여기서부터 추가함
  "javascript.format.enable": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.arrowParens": "avoid",
  "prettier.tabWidth": 2,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.trailingComma": "es5"
}

Prittier 관련 설정을 복사 + 붙여넣기 하면된다.

각 설정이 어떤 기능을 의미하는지는 검색하여 찾아보도록 하고 ~

추가적으로 필요한 규칙또한 검색해서 적용하도록 하자.