TIL 231121 - prettier

팀원들과 협업하는 뉴스피드 프로젝트가 시작되었다!

그 전에 오늘 튜터님께 배운 prettier 설정을 정리해본다.

prettier란 ?

• 전반적으로 코드를 정리해주는 코드 포매터

• 동적이나, 코드 리뷰 등을 통해 잡아내지 못하는 오류도 빠르게 발견해서 이를 바른 코드로 바꿔주는 기능

• 줄 바꿈, 띄어쓰기, 따옴표, 공백과 같은 스타일 요소들을 주로 변경해줌.

• 협업 시 코드 스타일을 지정하고, 이를 일관성 있게 맞추기 위해서 Prettier를 사용하면 코드의 일관성과 유지보수 측면에서 상당한 이점이 있다.
  
  
  

  사용법

아래의 명령어로 프로젝트 내에 Prettier를 설치

• npm install -D prettier 혹은
• yarn add -D prettier
• 프로젝트 내에 설치한 prettier를 실행함으로써 코드를 포맷팅
• package.json 내 scripts에 실행 커맨드 작성 후 실행 또는 터미널에서
  npx prettier 명령어(yarn format)를 바로 입력 후 실행
• 프로젝트의 root에 .prettierrc.js와 같은 설정 파일을 생성하여 사용
  
  
  

1. prettier 설치
   

2. package.json에 prettier 내용 붙여넣기.
   
   
   원래 package.json이 새로 하나 생기고, 새로 생긴 파일의 코드를 기존 파일에 붙여넣는 방식이었는데, prettier를 설치하고 나니 기존 package.json 파일에 prettier 코드가 들어와졌다.

그럼 됐고, scripts에 실행 커맨드 작성해준다.

근데 튜터님께서 "format: "prettier . 이렇게만 써도 문제 없다고 하셨다.

이제 yarn format 명령어로 prettier 실행하면 된다.


3. 프로젝트 폴더 내 최상단 경로에 .prettierrc.js 파일 생성 후, 코드 입력

• 옵션별 설명
  printWidth: 최대 줄 너비를 지정
  tabWidth: 각 들여쓰기 수준에 대한 공백 또는 탭의 수를 지정
  useTabs: true설정시 Prettier는 들여쓰기에 공백 대신 탭을 사용
  semi: 명령문 끝에 세미콜론을 포함 여부
  singleQuoute: 문자열 리터럴에 작은 따옴표 또는 큰따옴표 사용여부 결정
  quouteProps: Javascript또는 JSON에서 개체 키를 처리하는 방법을 지정 "as_needed" 옵션은 필요한 경우에만 따옴표로 변환, "consistent"는 모든 키에 일관된 따옴표를 지정 "preserve"는 원래 따옴표를 유지
  jsxSingleQuoute: singleQuoute와 유사한 옵션이지만 jsx속성에 해당
  traillingCommna: 여러 줄 개체 리터럴 및 배열에 후행 쉼표를 포함 여부("all" 모든 여러 줄 배열 및 객체의 후행 쉼표, "es5" 해당 되는 경우 배열 및 객체의 후행 쉼표, "none" 후행 쉼표 없음)
  bracketSpacing: 개체 리터럴 대괄호({}) 사이에 공백을 포함할지 여부
  arrowParents: 화살표 함수 매개변수 주위에 괄호를 추가할지 여부("avoid" 매개변수가 하나만 있는 경우 괄호 없음, "always" 항상 괄호 추가)`
  
  
  

tabWidth은 prettier 기본 띄우기 간격이 2인데, 20이면 어떻게 될지 src/App.js에서 확인해보자.
yarn format으로 실행 후 봐보면,

??? 뭐야 이게... 암튼 잘된다 %^^%

다시 되돌리려면, 간격 2로 변경 후 저장하고 다시 yarn format으로 실행해줘야함. 변경사항 있으면 무조건 yarn format으로 !

근데 prettier는 공백이나 코드 정리도 해주지만, 사용되지 않는 부분을 없애주는 기능도 함.


우선 프로젝트에서만 코드 정리가 되도록 하고 싶다면 cmd + , 키 눌러서 작업영역 선택 후
Format on Save 부분 체크하기.