Visual Studio Code(VS Code)의 유용한 Extension 살펴보기
개발을 할 때 기본적으로 필요한건 바로 IDE 일 것입니다.
IDE에는 Visual Studio, Eclipse, IntelliJ, PyCharm 등 유명한 프로그램들이 많습니다.
저는 개발할 때 Visual Studio Code(VS Code)를 사용 중인데요, 사실 VS Code 자체만으로 IDE라고 부르지는 못합니다.
컴파일, 디버그, 코딩 등 개발 환경에 필요한 모든 것을 프로그램에 기본적으로 통합하여 제공하는 것들을 IDE(Integrated Development Environment)라고 할 수 있는데, VS Code은 이러한 기능을 기본적으로 내장하고 있지는 않기 때문입니다.
대신 VS Code는 타 IDE에 비해 비교적 가벼우며, 방대한 양과 안정적인 플러그인(Extension)을 활용해서 개발에 필요한 기능을 IDE에 준하게 사용할 수 있고, 무엇보다 무료인 점이 많은 개발자들을 사로잡지 않았을까 생각합니다.
개인적으로는 이번 글에서 다룰 여러 유용한 익스텐션들이 합쳐진다면, 여타 프로그램들보다도 훨씬 좋은 코딩 경험을 느끼게 해 주는 프로그램이라고 생각합니다.
VS Code 다운로드 : https://code.visualstudio.com/
(1) Git Graph
주로 Git과 관련된 익스텐션을 많이 사용하게 되는데요! 그 중 첫 번째로 소개하고 싶은 것은 Git Graph 입니다.
위 사진처럼, 작업 중인 레포지토리에서 그간 이루어진 커밋 로그들을 그래프 형태로 직관적으로 보여주어서 유용하게 사용하고 있습니다. 브랜치도 같이 볼 수 있어요.
보여지는 것 뿐만 아니라, 커밋 항목에 마우스 우클릭을 하면 해당 커밋에 대한 액션을 명령어 입력 없이 편하게 실행할 수 있습니다.
저는 주로 커밋하지 않은 수정 내역을 stash 하는 기능이나, tag를 추가하는 기능, drop기능을 이 메뉴로 자주 사용하고 있습니다.
(2) Git History
이번에도 Git과 관련된 것인데요, Git History는 주로 특정 파일의 커밋 히스토리를 보고 싶을 때 많이 사용하게 됩니다.
화면 왼쪽의 파일 Explorer에서 원하는 파일에 마우스 우클릭-> Git: View file History를 클릭하면 해당 파일에 대한 커밋 히스토리가 화면에 표시됩니다.
파일 이외에도 코드 특정 라인에 우클릭하여 Git: View Line History를 사용할 수도 있으니 확인해 보세요!
(3) Git Lens
지금 소개할 Git Lens는 좀 더 Git 내역을 가까이서(?) 볼 수 있다는 느낌을 받는데요,
코드의 특정 단락이나 라인에 해당 내용이 언제, 어떤 사람에 의해 작성된 내역인지 커밋 정보를 흐린 글씨로 자동 표시해 줍니다.
마우스 커서를 가져가면 아래와 같이 자세한 정보도 표시해 줍니다. 
이처럼 Git과 관련된 확장 프로그램들을 추가하면 개발할 때 훨씬 유연한 작업을 기대할 수 있습니다..!
(4) Live Server
Live Server는 별도로 로컬 웹서버 구축을 하지 않아도 간편하게 로컬 서버를 이용할 수 있게 해 줍니다. 특히, 수정 내역을 바로 브라우저상에서 볼 수 있는 점이 좋습니다.
html이나 FE 관련 테스트할 코드를 브라우저상에서 빠르게 확인하고 싶을 때, 번거로운 서버 구축 작업 없이 편하게 사용할 수 있습니다.
설치한 뒤 vs code 하단부에서 Go live 버튼을 클릭하면, 브라우저에 127.0.0.1:5500 가 열리면서 시작하게 됩니다.
(5) Bracket Pair Colorizer
지금 소개하는 이 확장프로그램도 유용하게 사용 중인데요!
개발하다 보면 {, }나 (, ) 같은 괄호들 사이에 코드가 많으면, 이 괄호의 짝이 어느 것인지 헷갈리는 경우가 많습니다.
물론 괄호에 커서를 가져다 대면, 그 짝을 표시해 주기는 하지만 그렇게 하기 전에는 알 수 없기 때문에 Bracket Pair Colorizer을 유용하게 사용하고 있습니다.
설치하는 즉시 개발중인 코드에 가 보시면 바로 아래와 같이, 서로 짝인 괄호들끼리 색상으로 알아서 구분해 줍니다!
