들어가며
VS Code 장점 중 하나는 수많은 확장 프로그램을 지원 하는 데에 있다.
VS Code Marketplace에는 수만 개의 확장 프로그램이 있는데, 그중에서 보편적으로 많은 사람들이 사용하며 편리한 기능을 제공하여 업무 진행에 있어 도움이 되는 몇 가지 확장 프로그램을 소개하고자 한다.
Auto Close Tag
HTML 마크업을 할 때 Tag를 알아서 닫아주는 아주 심플한 기능의 확장 프로그램이다.
![auto-close.gif](https://xeblog.s3.ap-northeast-2.amazonaws.com/auto_close_40e068964b.gif)
Auto Rename Tag
HTML 마크업을 할 때 Tag를 교체할 때가 있는데, 이때 짝을 이루는 닫힌 Tag도 함께 수정되게 해주는 기능을 제공한다.
![auto-rename.gif](https://xeblog.s3.ap-northeast-2.amazonaws.com/auto_rename_35565f32a2.gif)
CSS Peek
HTML 파일에서 선언한 tag, id, class에 Ctrl 키를 누른 채로 클릭하게 되면 프로젝트 내에서 사용한 css 부분을 보여준다.
또한 Symbol Provider를 지원하므로 Ctrl + t로 class나 id 명으로 바로 검색도 가능하다.
![css-peek.gif](https://xeblog.s3.ap-northeast-2.amazonaws.com/css_peek_18381c28e1.gif)
Bracket Pair Colorizer
코드를 작성하다 보면 (), [], {}을 굉장히 많이, 또 중첩으로 사용하게 되는데 특히 중첩으로 사용하게 될 때 일치하는 Depth의 브래킷을 색상으로 구분하기 쉽게 표시해주는 확장 프로그램이다.
![bracket pair colorizer bracket pair colorizer](https://pxd-fed-blog.web.app/static/31cecfd757a49852fb8ab8df94690c22/80d71/bracket-pair-colorizer.png)
IntelliSense for CSS class names in HTML
css 에서 작성된 class를 html에서 참조할 수 있게 해주는 확장 프로그램으로서 단순히 코드의 작성량을 줄여줄 뿐만이 아닌 class 명을 새롭게 만들 때에도 행여나 class 명이 중첩되지 않는지 알 수 있어 편리하게 사용할 수 있다.
![html-css-class-completion.gif](https://xeblog.s3.ap-northeast-2.amazonaws.com/html_css_class_completion_60ad4c2cad.gif)
ESLint
코드 작성 시 거의 필수라고 봐야 할 확장 프로그램으로서 대부분의 사람이 사용하는 확장 프로그램일 것이다.
eslintrc를 이용한 ESLint 설정 등이 필요한데 코드를 보다 일관성 있게 만들고 버그를 피할 수 있도록 하여 코드의 질과 더불어 협업에서도 매우 좋은 결과물을 얻을 수 있다.
Prettier - Code formatter
개인적으론 ESLint가 나왔다면 당연히 따라 나와야 할 확장 프로그램이다.
Prettier는 정해진 규칙에 따라 자동으로 코드 스타일을 정리해 주는 도구이며 단독으로 사용해도 좋고 ESLint와 함께 사용하게 되면 더욱 좋다.
코드 스타일이 일관성 있게 작성되게 되므로, 협업 시 필수적으로 사용하게 되는 확장 프로그램으로서 한 번 사용하게 되면 그 누구라도 계속 사용하지 않을까 싶다.
Prettier 또한 prettierrc를 이용하여 사용자의 입맛에 맞게 여러 가지 옵션을 설정할 수 있다.
Git Graph
VS Code의 git으로 충분하지만, git SourceTree와 같은 git 저장소의 tree 확인이 가능하여 저장소의 git 그래프를 보고 그래프에서 git 작업을 쉽게 수행할 수 있다.
![git-graph.gif](https://xeblog.s3.ap-northeast-2.amazonaws.com/git_graph_f83065cfa3.gif)
GitLens — Git supercharged
Git Graph와 함께 사용 중인 확장 프로그램으로서 코드 작성 중에 포커스가 있는 부분의 코드 작성자를 확인할 수 있는 편리한 확장 프로그램이다.
또한, 코드 작성 중 바로 저장소를 탐색 및 비교도 할 수 있다.
![git-lens.gif](https://xeblog.s3.ap-northeast-2.amazonaws.com/git_lens_70592778a3.gif)
마치며
이 글에서 소개한 확장 프로그램들은 오랜 기간 사용한 것도 있고, 최근에 사용을 한 것도 있는데 앞으로도 꾸준히 사용할 확장 프로그램만 추려서 소개하였다.
업무를 진행하면서 확장 프로그램이란 뭔가 개개인의 취향에 영향(?)도 받는 게 사실이라 나 또한 이 외에도 여러 가지 확장 프로그램을 사용하지만, 그중에서도 누구에게나 보편적으로 유용하게 사용될 듯한 확장 프로그램만 소개하였으니 참고 바란다.