React(리액트): 리액트에서 Prettier 사용하기(vscode에서 prettier사용)

리액트 개발을 조금 더 편하게 할 수 있게 해주는 도구들에 대해서 알아보자.

첫 번째로 알아볼 도구는 'Prettier'인데 자동으로 코드의 스타일을 관리해주는 도구이다.

 

예를 들어 문자열을 표현할 때 작은따옴표를 쓸지, 큰 따옴표를 쓸지 또는 코드의 뒤에 ;(세미콜론)을 붙일지 말지 

들여 쓰기는 얼마나 할지와 같은 것들을 관리해 줄 수 있다. 

 

이 Prettier의 특징은 코드의 스타일을 사용자의 마음대로 쉽게 커스터마이징 할 수 있다는 점이다.

오른쪽에 나와있는 옵션들을 하나하나 커스터마이징 해줄 수 있다. 

 

Prettier는 자바스크립트 뿐만 아니라 HTML, CSS 코드의 스타일도 관리할 수 있고 React, Angluar, Vue 등의 라이브러리도 지원해주기 때문에 굉장히 사용성이 좋다. 

 

Prettier의 가장 기본적인 사용법은 명령어를 사용해서 쓰는 것이다. 특정 디렉터리에서 Prettier명령어를 사용하면

모든 코드가 우리가 정한 규칙에 따라 코드 스타일이 바뀐다. 

Pre-commit Hook을 사용해서도 Prettier를 사용할 수 있다.

 

가장 추천하는 방법은 에디터와 연동해서 사용하는 방법인데, 코드를 저장할 때 Prettier를 사용해서 정리가 되도록

설정해두면 아주 편하다.

 

VScode에서 Prettier를 사용해보자.

먼저 'npx creat-react-app useful-tools'이라는 명령어로 use-tools라는 이름의 새로운 리액트 프로젝트를 만들어주자.

 

다음으로 확장(extension)에 들어가서 Prettier를 검색하고 가장 위에 있는 Prettier - Code formatter를 설치해준다.

 

그다음 프로젝트의 디렉터리에 새 파일을 만들어주어야 한다. 파일 이름은 '.perttierrc'이고 이 파일에서 Prettier에서

사용할 속성을 넣어줄 수 있다. 

 

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

trailingComma 속성은 객체를 선언하게 될 때 각 항목마다 쉼표를 넣는 것을 의미한다. 배열에도 마찬가지

none으로 설정하면 쓰지않겠다는 것이고 es5면 es5에서 지원하는 정도로 다 넣겠다는 의미이다.

tabWidth 속성은 들여쓰기를 얼마나 할지 정하는 것이다. 기본값은 4

semi 속성은 세미콜론을 쓸지 말지 정하는 것이다.

singleQuote는 작은 따옴표를작은따옴표를 뜻하며 true로 설정하면 작은따옴표를 사용하겠다는 뜻이다.

 

다른 속성들은 공식 홈페이지를 참고해서 적용하면 된다.

 

Prettier를 사용해서 코드를 정리하려고 할 때는 F1키를 누르고 Format Document를 입력해 클릭하면 된다.

우리가 .prettierrc에 따라서 코드가 자동으로 정리되는 것을 확인할 수 있을 것이다.

 

만약 파일을 저장할 때마다 자동으로 Prettier를 사용하고 싶다면 '파일 > 기본 설정 > 설정'으로 가서 format on save를 검색하고 해당 항목을 체크해주면 된다.