Front-End 개발 시 유용한 VS Code 플러그인 소개

지난번 VS Code 설치 및 VS Code 기본 세팅 포스팅에 이어서 이번 포스팅에서는 VS Code 플러그인, 즉 VS Code Extension의 설치 방법과 프론트앤드 개발 시 유용한 Extension 이 어떤 것들이 있는지 알아보도록 하겠습니다. 

Extension 설치방법

VS Code에서 Extension 설치를 하려면 좌측 사이드바에서 Extension 버튼을 누릅니다. 그리고 검색창에 본인이 원하는 익스텐션(플러그인)을 검색하거나 우측 상단의 메뉴 아이콘을 클릭하여 현재 설치되어 있는 익스텐션을 확인할 수 있습니다. 

** 반응형 광고 **

Front-End 개발 시 유용한 Extension 

#1 HTML CSS Class Completion

CSS class가 많을 때 유용한 익스텐션으로 같은 프로젝트 내에 있는 모든 CSS class를 cache 해서 자동완성 기능을 제공해주고 있습니다. 

어떻게 작동하는 보시려면 Extension을 설치하고 css 파일에서 .testClass를 만들어 봅니다.

그리고 VS Code 좌측 하단에 있는 번개 표시를 눌러주면 CSS Class가 캐시됩니다.

이제 HTML 코드에서 class명이 자동완성으로 나타나는 것을 보실 수 있습니다. 편리하죠?

#2 HTML Snippets

기본적으로 VS Code 에서 HTML Snippets 를 제공해주고 있지만 이 Extension 은 더 강력한 HTML Snippets 를 제공해주고 있습니다. 가장 좋은 점은 점은 태그 Snippets 를 제공해줄 때 각 태그별로 기본적으로 가지고 있어야 할 속성까지 같이 나온다는 점에서 편리한 것 같습니다. (ex. a 를 타이핑 하면 <a href=""></a> 까지 나옵니다.)

** 링크광고 **

#3 Debbuger for chrome

크롬과 관련되어 있지만 특이하게도 MS에서 만든 익스텐션입니다. 이 익스텐션의 장점은 VS Code Editor 내에서 마치 크롬 디버깅을 하듯이 javascript를 디버깅 할 수 있다는 점입니다. 어떻게 동작하는지는 다음 그림을 보시면 이해가 되실 겁니다.

#4 Git History

Git으로 관리되는 프로젝트의 commit history 등을 편리하게 확인할 수 있도록 해주는 익스텐션입니다. 이 익스텐션을 사용하면 다른 개발자가 변경한 내용을 쉽게 확인할 수 있습니다. 그래서 혼자 하는 간단한 프로젝트보다 여러명이 같이 작업하는 프로젝트나 GitHub의 오픈소스 프로젝트 작업하실 때 유용할 것 같네요.

추가로 프론트엔드 개발 공부 - 프개공 이라는 페이스북 페이지가 있으니 이 곳을 통해 더 많은 프론트엔드 공부하는데 도움 받으시길 바랍니다.

** 큰사각형 광고 **