유용한 확장 프로그램

VS Code Extensions


들어가며

VS Code 장점 중 하나는 수많은 확장 프로그램을 지원 하는 데에 있다.
VS Code Marketplace에는 수만 개의 확장 프로그램이 있는데, 그중에서 보편적으로 많은 사람들이 사용하며 편리한 기능을 제공하여 업무 진행에 있어 도움이 되는 몇 가지 확장 프로그램을 소개하고자 한다.

Auto Close Tag


HTML 마크업을 할 때 Tag를 알아서 닫아주는 아주 심플한 기능의 확장 프로그램이다.

출처 : Auto Close Tag Marketplace

Auto Rename Tag


HTML 마크업을 할 때 Tag를 교체할 때가 있는데, 이때 짝을 이루는 닫힌 Tag도 함께 수정되게 해주는 기능을 제공한다.

출처 : Auto Rename Tag Marketplace

CSS Peek


HTML 파일에서 선언한 tag, id, class에 Ctrl 키를 누른 채로 클릭하게 되면 프로젝트 내에서 사용한 css 부분을 보여준다.
또한 Symbol Provider를 지원하므로 Ctrl + t로 class나 id 명으로 바로 검색도 가능하다.

출처 : CSS Peek Marketplace

Bracket Pair Colorizer


코드를 작성하다 보면 (), [], {}을 굉장히 많이, 또 중첩으로 사용하게 되는데 특히 중첩으로 사용하게 될 때 일치하는 Depth의 브래킷을 색상으로 구분하기 쉽게 표시해주는 확장 프로그램이다.

bracket pair colorizer
출처 : Bracket Pair Colorizer Marketplace

IntelliSense for CSS class names in HTML


css 에서 작성된 class를 html에서 참조할 수 있게 해주는 확장 프로그램으로서 단순히 코드의 작성량을 줄여줄 뿐만이 아닌 class 명을 새롭게 만들 때에도 행여나 class 명이 중첩되지 않는지 알 수 있어 편리하게 사용할 수 있다.

출처 : IntelliSense for CSS class names in HTML Marketplace

ESLint


코드 작성 시 거의 필수라고 봐야 할 확장 프로그램으로서 대부분의 사람이 사용하는 확장 프로그램일 것이다.
eslintrc를 이용한 ESLint 설정 등이 필요한데 코드를 보다 일관성 있게 만들고 버그를 피할 수 있도록 하여 코드의 질과 더불어 협업에서도 매우 좋은 결과물을 얻을 수 있다.

Prettier - Code formatter


개인적으론 ESLint가 나왔다면 당연히 따라 나와야 할 확장 프로그램이다.
Prettier는 정해진 규칙에 따라 자동으로 코드 스타일을 정리해 주는 도구이며 단독으로 사용해도 좋고 ESLint와 함께 사용하게 되면 더욱 좋다.
코드 스타일이 일관성 있게 작성되게 되므로, 협업 시 필수적으로 사용하게 되는 확장 프로그램으로서 한 번 사용하게 되면 그 누구라도 계속 사용하지 않을까 싶다.
Prettier 또한 prettierrc를 이용하여 사용자의 입맛에 맞게 여러 가지 옵션을 설정할 수 있다.

Git Graph


VS Code의 git으로 충분하지만, git SourceTree와 같은 git 저장소의 tree 확인이 가능하여 저장소의 git 그래프를 보고 그래프에서 git 작업을 쉽게 수행할 수 있다.

출처 : Git Graph Marketplace

GitLens — Git supercharged


Git Graph와 함께 사용 중인 확장 프로그램으로서 코드 작성 중에 포커스가 있는 부분의 코드 작성자를 확인할 수 있는 편리한 확장 프로그램이다.
또한, 코드 작성 중 바로 저장소를 탐색 및 비교도 할 수 있다.

git lens
출처 : GitLens — Git supercharged Marketplace

마치며


이 글에서 소개한 확장 프로그램들은 오랜 기간 사용한 것도 있고, 최근에 사용을 한 것도 있는데 앞으로도 꾸준히 사용할 확장 프로그램만 추려서 소개하였다.
업무를 진행하면서 확장 프로그램이란 뭔가 개개인의 취향에 영향(?)도 받는 게 사실이라 나 또한 이 외에도 여러 가지 확장 프로그램을 사용하지만, 그중에서도 누구에게나 보편적으로 유용하게 사용될 듯한 확장 프로그램만 소개하였으니 참고 바란다.


추천 글