[VS Code] 자주 쓰는 비주얼 스튜디오 코드(VS CODE) 확장 프로그램 모음

오늘은 저가 프론트엔드 개발을 할 때 비주얼 스튜디오에 꼭 설치하여 사용하는 확장 프로그램들에 대해서 알아보도록 하겠습니다. 저가 개인적으로 사용하는 것이니 꼭 이것이 정답은 아닙니다.

 

1. ES-LINT & PRETTIER

 

eslint extension

lint는 소스코드의 문제를 찾는 작업이고, 이러한 작업을 행하는 것이 linter입니다. 대표적으로 많이 사용하는 javascript linter는 eslint입니다. 해당 익스텐션을 깔아두면 밑줄 등을 통해 우리에게 에디터 내에서 잘못된 코드를 알려줍니다. 필수적으로 사용하는 확장프로그램입니다.

prettier extension

code formatter는 개발자가 작성한 코드를 약속된 코딩 스타일로 변환해주는 도구 입니다. 이중 대표적으로 많이 사용되는게 prettier입니다. 대다수의 오픈소스(ex: react, webpack) 라이브러리 들이 prettier를 code formatter로 사용하고 있습니다.

 

2. AUTO CLOSE TAG & AUTO RENAME TAG

 

auto close tag extension

auto close tag는 말 그대로 태그를 닫아주는 확장프로그램입니다. 여러분이 만약 <div>를 작성하면 에디터가 알아서 </div>로 하여금 태그를 닫아줍니다. 가끔 원하는대로 안움직이기도 하는데 정말 유용합니다.

auto rename tag extension

auto rename tag는 말 그대로 태그를 자동으로 변경하여 줍니다. <div></div> 중 앞의 div를 <span>으로 바꾸면 뒤의 </div>도 자동으로 </span>으로 바뀌는 확장 프로그램입니다.

 

3. IMPORT COST

 

import cost 는 내가 추가한 모듈의 사이즈를 실시간으로 에디터상으로 확인할 수 있는 확장 프로그램입니다. 내가 작성한 컴포넌트 모듈 혹은 외부 라이브러리 등의 사이즈가 어느정도 되는지 알 수 있습니다. 실시간으로 사이즈가 확인이 되서 번들 사이즈 줄일때 유용 합니다.

계산된 화면

위와 같은 결과화면을 볼 수 있을 것입니다. 이렇게 실시간으로 확인되면 정말 편합니다. 용량이 큰 것들은 빨간색으로 표시됩니다.

 

4. LIVE SERVER

 

Live Server Extension

로컬 웹 서버로 사용할 수 있는 Live Server Extension입니다. 말 그대로 로컬에서 웹 서버를 가동하고 싶을 때 사용하게 됩니다. 빌드 후 확인할 때 자주 사용합니다.

 

5. VSCODE-ICONS

 

vscode-icons Extension

vscode-icons은 말 그대로 그냥 icon 디자인 이쁘게 보이게 하는 것입니다. 근데 이렇게 시각적으로 아이콘을 분류해주면 눈도 안아프고 좋습니다. 다같은 폴더 모양이면 눈이 너무 아픈거 같습니다.

샘플

위는 제가 하고 있는 사이드 프로젝트의 폴더들 입니다. 폴더 명에 따라 이쁘게 변해서 한눈에 폴더 구조가 눈에 들어옵니다. 생각보다 쓰는 것과 안쓰는 것의 차이가 큽니다.

 

6. COLOR PICKER

 

Color Picker Extension

Color Picker는 말 그대로 색상 선택 하는 것입니다. css를 작성하실 때 많이 사용하게 됩니다. 우리가 특정 색상값을 rgba나 hex값으로 작성하였을 때, 색상을 조금만 바꾸고 싶을 때 직접 눈으로 보면서 바꾸면 생각보다 편합니다. 물론 대부분의 프로젝트가 색상이 지정되있거나 각자 사내에서 쓰는 컬러가 있겠지만 개인 프로젝트때 주로 많이 사용합니다.

컬러피커 예시화면

실제로 컬러피커를 사용할 때 화면입니다. 이렇게 실시간으로 볼 수 있고 클릭해서 색상을 변경할 수 있습니다.

 

이 외에도 저는 각 프레임워크 별 코드스니펫 등을 사용하고 있습니다. 특히, import cost는 실시간으로 모듈을 import하였을때 cost가 어느정도 나오는지 알 수 있어 정말 편리합니다. 이외에도 과거에 Bracket Pair Colorizer2(괄호 색 구분)를 사용하곤 했었는데 VS Code에 빌트인되었습니다. 인간은 편한 것을 추구하기 때문에 가끔 Extension 탭에 가서 상위권에 어떤것이 있는지 보고 마음에 드는거 사용해 보는것이 좋다고 생각합니다.