리액트 프로젝트에서 Prettier로 코드 스타일 통일하기

본인 혼자 개발할때는 크게 상관이 없지만, 나를 제외한 다른 개발자와 같이 협업을 하여 개발을 진행할때는 여러 규칙들을 정해서 그 규칙을 따라 코드를 작성하는 편이 좋다.

예를 들면 들여쓰기는 몇칸으로 할건지, 쌍따옴표를 사용할건지 / 홑따옴표를 사용할건지, 대괄호 사이에 공백을 넣을건지 등등등...

개발자마다 코드 스타일이 같을 순 없기때문에 각자 코드 스타일로 코드를 짜되, 파일 저장시에는 팀에서 정해진 룰을 따라 그 규칙대로 저장된다면 너무 좋지않을까? 

 

Prettier는 모든 원본 스타일을 제거하고 모든 출력코드가 지정한 스타일을 따르도록 해주는 유용한 도구다.

 

1. vscode

 

 

2. npm

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

2. yarn

yarn add --dev --exact prettier

 

설치하는 방법은 여러방법이 있지만 난 visual studio code에서 대체로 코드를 작성하기때문에 확장프로그램으로 그냥 설치해버렸다. (vscode 확장프로그램으로 설치했을 경우에는 따로 설치할 필요없음)

 

ctrl + , 단축키로(설정화면) 검색에서 format javascript를 검색해서 아래 박스에 해당하는 부분을 체크 해제한다.

 

 

 

그 다음 format on save를 검색 후 아래 박스에 해당하는 부분을 체크해준다.

 

 

그 후에 사용 중인 리액트 프로젝트에서 루트 위치에 .prettierrc 파일을 생성 후 스타일 규칙을 지정한다.

 

---

 

.prettierrc

{

  "singleQuote": false,

  "semi": true,

  "useTabs": false,

  "tabWidth": 2,

  "trailingComma": "es5",

  "jsxBracketSameLine": true,

  "printWidth": 100

}

 

위처럼 적용된 규칙은

• 문자열을 쌍따옴표 ( " ) 로 사용한다
• 명령문 끝에 세미콜론을 붙인다.
• Tab으로 줄을 들여쓰지않고 space로 들여쓴다
• 들여쓰기 수준 당 공백 수 지정
• 여러 줄로 된 경우 가능한 한 쉼표를 인쇄한다(예를 들어 한 줄 배열은 후행 쉼표를 가지지 않는다, 만약 all로 주면 함수 인수를 포함해 가능한 경우 후행 쉼표를 붙인다)
• jsx 브래킷을 같은 줄에 적는다
• 한 줄이 100칸을 넘어가지 않도록 한다(기본 값 80)

 

예제) 

prettier가 적용되기 전 코드

 

prettier가 적용된 코드

 

 

 

 

prettier에 지정한 스타일대로 코드가 저장이 잘 된 것을 확인할 수 있다.

여기서 사용한 옵션들은 극히 일부이며 더 세부적인 옵션들은 prettier 홈페이지에서 확인 가능하다.

 

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