필자가 추천하는 VS Code 확장자 2편

이번에도 개발을 하면서 강의에서 추천해준 확장자를 정리하고자 이 글을 쓰게 되었다.

1편과 나눈 이유는 크게 없지만, 그래도 다른이도 유용하게 쓰기를 바라면서 이 글을 썼다.

 

 

 

1. Indent-Rainbow

프로젝트가 커지면 커질수록 tab은 더 안으로 들어가게 된다. 그렇다 보니 너무 멀리 있는 탭의 경우 이 탭의 끝은 어디인지 솔직히 분간이 잘 되지 않는 경우도 있다. 그럴 때 유용한 확장자라고 할 수 있다.

VS Code에서 Indent Rainbow를 설치하였을 때 화면 일부 캡처

위 사진은 간단한 예시로 내가 현재 위치한 커서의 탭이 <q-list>라고 할 때, 해당 탭의 끝과 끝을 구분해주기 위해 세로로 흰 선이 있어 확인하기가 수월하다.

 

그리고 js/json의 경우는 조금 다르게 보인다.

json에서의 Indent Rainbow 커서를 하였을 때 화면 일부

필자가 postcss부분에 마우스 커서가 올라갔을 때, 해당 오브젝트의 밑줄과 세로 라인으로 어디까지 표기가 되는지 보여주게 되어 좀 더 빠른 개발환경을 제공해준다.

 

 

2. Git Graph

사실 이건 프로젝트를 통해 알게 된 것으로 branch 간의 merge여부와 해당 커밋 내용을 확인할 수 있다.

Git Graph에서 현 프로젝트의 merge와 누가 언제 commit을 한지 확인할 수 있는 화면 일부

깃 랩은 브랜치 간에 머지가 어떻게 되었는지 눈을 확인할 수 있는 유용한 확장자다. 브랜치로 1 커밋씩 올려 mr을 요청하는 현 회사의 시점에서는 매우 유용하게 볼 수 있다.

 

 

3. CSS Peek

Vue 프로젝트의 경우 하나의 파일에서 HTML, CSS, JavaScript를 작성하는 경우가 있다. 그러다 보니 CSS를 하다 보면 위치 찾을 때, Ctrl + F 많이 사용하는데 그 번거로움을 조금이라도 더 단축시켜줄 방법이 있다.

클래스를 Ctrl 누르고 클릭시 Class 정의한 위치를 확인할 수 있는 화면 캡처

html에서 Class가 있는 부분에서 내가 찾고 싶은 클래스명은 Ctrl + Click을 하게 되면 해당 코드의 CSS를 확인을 미리 볼 수 있고, 이동도 할 수 있다.

일부 프로젝트의 경우 모든 것이 하나에 있다 보면 이 기능이 생각보다 유용할 거라 생각이 된다.

 

 

 

이렇게 오늘은 VS Code 확장자 추천 2편을 적게 되었다.

세상은 넓고 확장자는 너무 다양하기에  정보가 너무 난무할 수 있다.

그렇다 보니 역시 가장 좋은 건 본인이 직접 써보고 결정을 하는 것이 맞다고 본다.

 

누가 이게 좋더라라고 해도 내가 유용하지 않으면 의미가 없기 때문이다.

그러니 무조건 믿기보단 하나씩 프로젝트에 적용해보면서 나만의 확장자를 구성해나가기를 추천한다.

 

 

 

Update : 23. 01. 07