Tool/Visual Studio

[VSC] 💅 Prettier 확장프로그램으로 저장할때마다 코드 정리하기 / vscode prettier auto save 작동하지 않을 때

해당 글은 퍼블리셔, 디자이너들을 위해 package와 별다른 설정 없이 확장프로그램으로만 작동합니다.
개발자분은 기존에 사용하시던 eslint규칙과 prettier을 하셔도 무관합니다.

 

뭐든 이쁜게 최고다.

코드도 이쁘게 정리되어 있어야지 눈에 확 들어오고, 유지보수에도 큰 영향을 차지한다.

 

오늘은 코드를 '저장할때마다 보기 좋게 정리되도록' 할 것이다.

 

1. 확장프로그램 Prettier 설치

 좌측 메뉴들 중 블록 아이콘을 클릭해 Prettier을 설치해 준다.

 

2.  Setting변경

좌측 하단 톱니바퀴 아이콘을 눌러 Setting을 켜준다.

 

2-1. Default Formatter 설정

검색창에 Default Formatter을 쳐서 기존 Default Formatter > none을 Prettier로 바꿔준다.

만약 없으면, 에디터를 껐다 켜자.

 

2-2. Format On Save 수정

검색창에 save을 쳐서 기존 Format On Save가 체크박스 해제였던 걸 체크해 준다.

 

3.  Auto Prettier on Save 확인

아무런 파일을 켜서 저장해 보면 이렇게 코드가 재정렬 되는 걸 볼 수 있다.

완료! 이제 코드를 보기 더 편해졌을 것이다.

 

 

 

728x90
반응형