VS Code 확장프로그램 TOP 8

안녕하세요,  손재의 파이프라인 블로그 주인장 주니어 개발자 '손재'입니다.

 

오늘은 주니어 개발자가 보다 편리하고, 깨끗한 프로그래밍을 할 수 있도록 해주는 VS Code Extention Plugin, 비주얼 스튜디오 확장팩 (확장 플러그인) TOP 10을 알려드리고자 해요. VS Code 프로그래밍 에디터는 전 세계적으로 가장 많이 쓰이기도 하기에, 어쩌면 가장 사용자의 입맛(스타일)에 따라 주관적인 견해가 들어갈 수 있다는 점 유의해주시면 감사하겠습니다.

 

1. Editor Theme

VS Code를 설치하시면, 가장 기본적인 테마가 적용되어 있습니다. 기본적으로 적용되어 있는 테마도 훌륭하지만, 사용자들이 직접 만든 혹은 마이크로소프트 회사 자체에서 개발하여 사용자들이 사용하게끔 빌드시켜놓은 게 있는데요. 여기서 괜찮은 테마 몇 가지를 소개해드리고자 합니다. 가시성과 컬러감이 좋은 에디터 테마 3가지를 추천드릴게요.

 

첫 번째 : 깃허브 테마(GitHub Theme)

깃허브 테마는 제가 가장 처음 사용해 본 에디터 테마인데요. 깃허브에서 공식적으로 배포한 테마이기도 하고, 뭔가 굉장히 깔끔하고 필요한 부분에만 색감이 들어가서 굉장히 사용하기 좋았습니다. 그러나 한 가지 아쉬웠던 점은 HTML 태그 자체가 빨간색으로 표기가 되어 조금 부담스럽다고 해야 할까요? 그리고 CSS(SCSS 포함) 작성할 때 파일에서 태그 클래스 네임과 속성 값의 색이 같아 다소 불편한 점이 있었습니다. 이외에는 만족하고 사용한 것 같네요.

 

두 번째 : Winter is Coming Theme

두 번째 에디터 테마는 Winter is Coming Theme입니다. 반지의 제왕인지(?), 왕좌의 게임(?)인지 한 프로그램의 대사에서 인용했다고 하네요. 어쨌든, 제가 얼마 되지 않은 개발 경력 중 가장 오랜 시간 동안 사용했던 에디터 테마입니다.

 

전체적으로 차가운 느낌을 주고, 눈에 피로감을 주지 않는 색감을 사용해서인지 색이 예쁘기도 하고 마음에 들었습니다.

 

세 번째 : Night Owl

세 번째 추천해드릴 에디터 테마는 바로 Night Owl입니다. 현재 제가 사용하고 있는 테마이고요. Winter is Coming Theme 보다 조금 밝은 색감의 코드들로 작성할 수 있어 비교적 가시성이 좋아서 사용하고 있습니다. 여러분들도 한 번 사용해보시기를 적극 추천드립니다.

 

네 번째 : One Monokai Theme

One Monokai Theme 역시 색감의 조화가 굉장히 좋아서 사용했던 기억이 납니다. 그러나 뭔가 빨간색이 많이 보이기도 하고, 보색 같이 대비되는 색감이 많고, 배경이 진한 블랙이 없어서 얼마 사용하다가 말았던 기억도 나네요. 이 테마도 많은 개발자들이 사용하는데 본인의 편의에 맞다면 사용해도 좋을 것 같습니다.

 

2.  Material Icon Theme

다음으로 소개해드릴 확장 플러그인은 바로 Material Icon Theme입니다. 우리가 VS Code를 사용하면 왼쪽 작업 관리자 파일 안에 표시되는 파일 이름 옆 아이콘들을 예쁘고, 이 파일이 어떤 파일인 지 한 번에 알려주는 그런 역할을 하는데요. 누적 다운로드 수가 거의 1,000만에 가까울 정도로 많은 사람들에게 사랑받고 있습니다.

 

참고로 저는 Material Icon Theme 말고 Microsoft에서 제공하는 vscode-icons라는 것을 사용하고 있는데요. 개인적인 생각으로는 material icon theme보다 좀 더 깔끔하다는 생각이 들어서입니다. 다운로드 수를 봐도 비슷비슷하죠? 930만이 넘으니까요?

 

 

3. indent-rainbow

indent-rainbow는 아래 보이는 사진처럼 열린 태그와 닫힌 태그 부분이 정확이 어디까지인지 개발자가 올바르게 식별할 수 있도록 도와주는 확장 플러그인입니다. 굉장히 간편하고 개발에 그렇게 걸리적거리는 부분이 없기 때문에 많이 사용하고 있습니다.

 

4. 한국어 패치 확장팩

VS Code용 한국어 확장팩은 말 그대로 영어로 된 부분을 한국어로 번역되어 한국인 개발자들이 사용하기에 굉장히 편리합니다. 배포 역시 Microsoft에서 했기 때문에 퀄리티 측면서에서 충분히 믿고 사용해도 될 것 같습니다.

 

5. Live Sass Compiler

다섯 번째 Live Sass Compiler는 Vue.js, React.js를 사용하면 잘 사용하게 되지 않게 된 확장 팩 중 하나이나, HTML, CSS, JS 로만 페이지를 구현할 때 보다 편리한 작업을 위해 SASS(SCSS)를 사용하긴 합니다. 이때 Live Sass Compiler를 설치하여 하단의 watch를 클릭하면 알아서 SASS 파일을 CSS 파일로 컴파일해주기 때문에 굉장히 편리하게 import 하여 사용할 수 있습니다.

 

6. Live Server

Live Server는 이름 그대로 우리가 작업한 작업물을 실시간으로 로컬 서버에서 즉각적으로 확인할 수 있게 도와주는 확장팩입니다. 일일이 open In Default Brower 혹은 Open In Other Browers를 클릭하여 확인하는 것이 아닌 Open with Live Server로 확인하면 여러분 로컬 서버를 띄울 필요 없이 바로바로 확인할 수 있다는 장점이 있습니다. 다운로드 수도 벌써 1,660만이니 검증된 확장팩이겠죠?

 

7.  Prettier - Code fomatter

Prettier - Code fomatter는 이름부터 프리티입니다. 😊😊 코드를 작성하고 임의로 저장을 하면 Prettier가 설치되어 있다면, 자동으로 예쁘게 정렬되어 개발자들이 코드를 확인함에 있어 편안하게 작업할 수 있는 환경을 만들어주는 플러그인입니다. Prettier 말고도 ES Lint 혹은 TS Lint도 많이 쓰지만 Vue.js와 React.js 등 자바스크립트 프레임워크에서 동시에 Prettier와 ES Lint가 함께 적용되지 않아 별도로 세팅을 해줘야 하는 불편함이 있지만, Prettier만 설치하면 어느 정도 만족스러울 만한 예쁜 코드로 바꿔주기 때문에 일일이 세미콜론(;)을 찍을 필요도 없고, 다양한 편리한 기능을 제공합니다.

 

8. Code Snap

CodeSnap은 VS Code에서 스크린숏 기능을 일컫는다고 이해하시면 될 것 같습니다. 우리가 원하는 코드를 기술 블로그처럼 어딘가 기록을 해야 하는데 뭔가 예쁘게 캡처를 하고 싶을 때 이런 식으로 드래그를 하여 CodeSnap을 클릭하면 오른쪽 사진처럼 스크린숏 된 파일이 생성됩니다. 이것을 활용하면 됩니다.

 

저장하는 방법은 CodeSnap 아이콘을 클릭하면 아래 사진처럼 저장할 위치를 선택할 경로 알림이 뜨게 되고, 여기서 여러분들이 원하시는 경로에 저장하여 사용하면 됩니다.