비주얼 스튜디오 코드 prettier

코드의 형식을 정해주는 확장 기능

prettier을 설치하고 설정해보겠습니다.

 

 

---

1. 설치 방법

확장 기능 설치

① 비주얼 스튜디오 코드 왼쪽 메뉴에서 확장을 선택한다.

② 확장 탭 검색창에 prettier 검색.

③ Prettier - Code formatter 설치.

 

오른쪽 아래에 있는 파란색 설치 버튼을 누르셔도 설치가 되고, 그냥 확장 기능을 눌러서 상세페이지에서 설치를 눌러도 설치가 됩니다.

반응형

---

2. 설정 방법

단축키 [Ctrl + ,]를 누르면 설정창으로 바로 이동할 수 있습니다. 맥에서는 [Cmd + ,]를 눌러주세요.

 

설정 검색창에 save를 검색하시면 가장 위에 Format On Save를 설정할지 말지 결정하는 체크 박스가 보이실 겁니다. 우리가 설정하는 포맷. 즉, 형식을 저장하려면 체크를 해두어야겠죠. 체크 박스를 클릭해줍니다.

 

설정 방법 정리

① [Ctrl + ,] 단축키를 이용 설정창을 연다.

② save 검색 후 Format On Save 체크.

---

3. code formatter 설정

본격적으로 prettier을 설정해보겠습니다. 검색창에 prettier을 검색하고 스크롤을 내려 Tab Width를 찾아주세요. Tab키를 눌렀을 때 얼만큼 간격이 벌어지는지 설정하는 기능입니다. 만약 4라고 되어있으면 너무 넓어지니 적당한 2 정도의 수치를 넣어주세요. 

 

마지막으로 prettier quote를 검색해 single quote에 모두 체크를 해줍니다. quote는 인용하다 라는 뜻인데 여기서는 따옴표를 말합니다. 

 

그러니까 single quote(') = 작은 따옴표, double quote(") = 큰 따옴표 인거죠. 저희는 주로 작은 따옴표를 사용할 것이기 때문에 Single Quote를 체크해줍니다. 

 

 

prettier 설정

① Tab Width : 2

② Quoter : Single Quote 체크

---

이상으로 비주얼 스튜디오 코드에서 코드 형식을 설정해봤습니다.

 

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

[같이 보면 좋은 포스팅]

[coding/editor] - 들여쓰기 색 넣기 VS code

들여쓰기 색 넣기 VS code

[coding/editor] - vs code 괄호 색 넣어주는 확장 기능 설치해보자

vs code 괄호 색 넣어주는 확장 기능 설치해보자

 

그럼 이만.

총총.