React Prettier 사용하기

Prettier란?

• 프리티어는 코드 포맷의 통일성을 유지시켜주는 javascript라이브러리이다.
• 팀 프로젝트로 여러 많은 팀원들과의 협업을 할 때 코드 포맷 통일성 유지시키기 위해서 prettier를 사용한다.

Prettier 설치 방법

1. 아래 의 코드중 하나만 선택하여 터미넣에 입력하여 설치하자!

npm install -D prettier // npm설치
yarn add -D prettier  // yarn 설치

2. app.js가 있는 폴더에 .prettierrc.js 파일 생성하기

3.생성한 파일에 기본 설정 추가하기
<기본설정 코드 예시>

module.exports = {
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "tabWidth": 2, // 탭 너비 
  "singleQuote": true, // single 쿼테이션 사용 여부
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부

4. package.json 파일에 스크립트 추가하기
   <예시 코드>

{
    "name": "여러분의 프로젝트 이름일거예요",
    "version": "1.0.0",
    "scripts": {
        "start": "node app.js",
        "prettify": "prettier --write *.js **/*.js"
    },
... 생략
}

5. 터미널에서 npm run prettify 실행 (적용된 것 확인하기)

6. VS code에서 확장 플러그인을 통해 사용 prettier 플러그인 설치하기

7.설치 후에 Window는 정렬하는 Shif + Alt + F를 누르면 Configure Default Formatter 창이 나오는지 확인하기.

8. Configure 항목을 선택한다. "Select a default formatter ..."라고 나온다면 "Prettier - Code formatter"를 선택한다.

9. 완료!