Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- github
- CSS
- polling
- useState
- Fe
- 협업
- 비제어
- 오블완
- 개발자 도구
- react
- package.json
- form
- 티스토리챌린지
- tailwind css
- 개발
- Study
- Pr
- 개발자
- prettier
- Context API
- zustand
- next.js
- 코딩 테스트
- 프레임 워크
- frontend
- js
- react-query
- eslint
- 브라우저 동작
- PullRequest
Archives
- Today
- Total
ougi FE
[Formatter] Prettier? 그게 뭐고 어떻게 사용하는 것일까! 본문
728x90
오늘은 제가 개발을 할 때 없으면 어색하고 이상해서 개발하기 힘들 정도인 없어선 안될 Prettier에 대해 말씀 드리겠습니다!
📌 Prettier 그게 뭔데?
파일을 저장할때마다, 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 도구 입니다
이 도구가 코드 스타일을 정리해주어서 팀원들과 일관된 코드 스타일을 갖을 수도 있고 클린 코드를 작성할 수도 있습니다
탭, 공백, 세미콜론, 따옴표 등등을 알아서 수정해줍니다
🎯 사용법 (Node npm 방식)
npm install --save-dev prettier
prettier 설치해주기
npx prettier --write . # 전체 파일
npx prettier --write yourfile.js # 특정 파일
코드 포맷할 파일 지정해주기
🎯 사용법 (VSC 확장 플러그인)
- 왼쪽 사이드 바에 있는 Extensions 뷰에서 prettier을 검색해서 설치해줍니다
- 설정에서 Default Formatter을 prettier로 설정해주고 Format On Save에 체크해줍니다
글을 마치며
이 도구는 코드 스타일을 정리 해주는 정말 유용한 도구입니다 정말 깔끔하게 해주고 일관된 코드 스타일을 알아서 만들어줍니다 이 도구를 사용해 깔끔한 코드를 작성할 수 있게 되셨으면 좋겠습니다!!
728x90