작업 생산성을 높여주는 확장 프로그램 : Prettier(프리티어) 설정법

Prettier(프리티어)에 대해서

프리티어는 vs code 확장 프로그램으로 제공되는 코드 포매터(code formatter)인데요~
팀 프로젝트에서 정의한 코드 컨벤션(code convention)을 지키는데 매우 효과적입니다.
들여 쓰기, 공백, 따옴표 사용 등과 같은 스타일을 가이드에 포함하여 자동으로 코드를 일관된 형식으로 유지해 줍니다.
수동으로 코드를 정리하거나 스타일 규칙을 준수하려면 작업 생산성이 굉장히 떨어지므로 프리티어를 통해

코드의 일관성을 유지하면서 버그 또한 줄일 수 있는 장점이 있습니다.

 

반응형

 

 

프리티어 설치 방법

VS Code > 마켓플레이스에서 Prettier 검색 > install 클릭으로 간단하게 설치할 수 있습니다.

VS code > 확장 패널 > Prettier - Code formatter

 

 

프리티어(Prettier)가 반영될 수 있도록 하는 기본 설정 방법

새로운 프로젝트 저장소(repository)를 로컬(local)에 세팅하고,

작업을 시작하려 하는데 프리티어가 제대로 반영되지 않는 문제 발생했다면, 따로 기본 설정을 적용해줘야 합니다.

우선 프리티어가 제대로 설치되었는지 확인해 주세요~ 그리고 설정에 들어갑니다.

 

VS code > 설정

 

 

1.  default formatter 확인 - esbenp.prettier-vscode로 설정되어 있는지 확인

Default Formatter > Prettier - Code formatter

2.  format on save 확인 - 체크하기

Format On Save > check

기본 설정이 잘 되어 있다면, 활성화된 것인지 확인할 수 있습니다.
자동 저장 시, 프리티어 잘 적용되는 것을 확인할 수 있습니다.

 

.prettireignore에 대해서

프리티어 예외 파일 적용시키는 방법에 대해서도 알아보겠습니다.
여러 프로젝트를 작업하다 보면 각자 선언된 .prettierrc 파일이 있겠지만, 없는 프로젝트도 물론 존재합니다.
이것을 수동으로 disabled - on/off 처리하려면 너무 번거롭고 귀찮더라고요~

 

Prettier > disable

.prettireignore 파일을 생성하여 자동으로 반영되지 않도록 설정해 줍니다.

 

비활성화되어 있다는 것을 확인할 수 있습니다.
코드를 수정하고 저장해도 프리티어가 자동 적용이 안 되는 것을 확인할 수 있습니다.

 

이렇게 프리티어를 통해 작업의 생산성을 높이는 방법에 대해서 알아보았습니다.

 

 

 

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

 

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

 

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

 

[Server] QuickConnect로 외부에서 서버 접속하는 방법