(vs code) Prettier로 자동 들여쓰기 & 저장 시 ;(세미콜론) 자동세팅

VS code에서 유용한 확장프로그램 하나를 소개하려한다.

• 저장 시 설정한 영역으로 자동 들여쓰기 가능하다.
• 저장 시 ; 이 필요한 부분에 자동세팅된다.
  ➡️ 즉, 이름대로 code formatter이다.
• 추가적인 기능이 더 있지만, 내가 유용하게 쓰고있는 기능 설정을 작성하고자 한다!

우선, 확장프로그램에서 해당 프로그램을 설치하고, vs code의 설정을 들어간다.(좌측하단에 있음)

설정 검색란에 prettier을 검색해서, 확장 밑에 있는 Prettier를 선택한다.

그 후 , 저장 시 설정되는 width와 자동 들여쓰기 시 적용되는 tab을 원하는 정도로 설정해준다.(스크롤해서 내려가면 찾을 수 있다.)

➡️ tab은 4정도가 적당한 것 같다

저장 시 ; 자동으로 필요한 곳에 생기게 하기 위해선, semi를 선택해주면 된다. 추가적으로 밑에 Single Quote는 "" 대신 ''으로 저장되게끔 해주는 것인데, 선택사항이다.

이렇게 했는데도 적용이 안된다면, default formatter를 검색해서 밑에 editor를 prettier로 변경해준다.

format on save도 체크해주자.

이렇게 하면 코드 작성할 때 자동으로 이쁘게 만들어주니 아주 편하다~~!👍🏻