ougi FE

[Formatter] Prettier? 그게 뭐고 어떻게 사용하는 것일까! 본문

카테고리 없음

[Formatter] Prettier? 그게 뭐고 어떻게 사용하는 것일까!

ougi 2024. 9. 6. 19:32
728x90

오늘은 제가 개발을 할 때 없으면 어색하고 이상해서 개발하기 힘들 정도인 없어선 안될 Prettier에 대해 말씀 드리겠습니다!


📌 Prettier 그게 뭔데?

파일을 저장할때마다, 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 도구 입니다

이 도구가 코드 스타일을 정리해주어서 팀원들과 일관된 코드 스타일을 갖을 수도 있고 클린 코드를 작성할 수도 있습니다

탭, 공백, 세미콜론, 따옴표 등등을 알아서 수정해줍니다

Prettier


🎯 사용법 (Node npm 방식)

npm install --save-dev prettier

prettier 설치해주기

npx prettier --write . # 전체 파일
npx prettier --write yourfile.js # 특정 파일

코드 포맷할 파일 지정해주기


🎯 사용법 (VSC 확장 플러그인)

  1. 왼쪽 사이드 바에 있는 Extensions 뷰에서 prettier을 검색해서 설치해줍니다
  2. 설정에서 Default Formatter을 prettier로 설정해주고 Format On Save에 체크해줍니다

글을 마치며

이 도구는 코드 스타일을 정리 해주는 정말 유용한 도구입니다 정말 깔끔하게 해주고 일관된 코드 스타일을 알아서 만들어줍니다 이 도구를 사용해 깔끔한 코드를 작성할 수 있게 되셨으면 좋겠습니다!!

728x90