VSCode에서 React를 Prettier 적용시키기!

React 코드를 협업에 유용하게 또는 코드를 알아보기 쉽게 하기 위해 사용한다.

 

1. Prettier 설치

VSCode에서 왼쪽상단에 확장을 클릭해준다.

확장

확장을 클릭 한 후 prettier를 검색하여 

prettier

를 설치 해준다.

2. .prettierrc 파일 생성

.prettierrc라는 파일을 해당 프로젝트 루트 디렉토리에 만들어준다.

 

사용하는 규칙

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

 

자세한 규칙 설명은 공식 문서에서 확인 할 수 있다. https://prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

 

3. VSCode에 적용

ctrl + , 를 눌러 설정 창으로 이동한다.

 

이동 후  오른쪽 상단에 json으로 변경 하는 버튼을 눌러준다.

json 변경 버튼

버튼을 누르면 본인이 설정한 값들이 json형식으로 화면이 바뀐다. 

Prettier의 형식을 적용 값을 넣어주면 정상적으로 실행된다.

editter 설정 

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

 

 

출처 : 

https://leehwarang.github.io/docs/tech/2020-06-24-prettier.html