[VSCode] 확장 프로그램 추천

 

개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪

 

VS Code를 사용하는 이유 중 하나가 확장 프로그램이라고 할 수 있을 정도로

확장 프로그램이 굉장히 잘 되어 있어요 !

어떤 언어를 사용해서 개발하느냐에 따라 그에 맞는 확장 프로그램을 설치해 주면

굉장히 편리하게 개발할 수 있고, 그 만큼 개발 효율도 낼 수 있죠 

이번 포스팅에서는 제가 사용하고 있는 확장 프로그램을 소개해드리려고 합니다 (❁´▽`❁)*✲ﾟ*

 

 

확장 프로그램 설치 방법

확장프로그램은 좌측 사이드바 4번째 아이콘 확장 또는 단축키 Ctrl+Shift+X 로 접근할 수 있다.

해당 영역에서는 현재 설치되어 있는 확장 프로그램을 확인 할 수 있으며,

검색을 통해 새로운 확장 프로그램을 설치할 수 있다.

 

 

Korean(사용법) Language Pack for Visual Studio Code

Korean(사용법) Language Pack for Visual Studio Code - Visual Studio Marketplace

VS Code용 한국어 팩으로. VS Code를 처음 설치하게 되면 영어로 설치되게 되는데 해당 플러그인을 설치해주면 한국어로 이용할 수 있다.

 

Auto Close Tag / Auto Rename Tag

Auto Close Tag - Visual Studio Marketplace

Auto Rename Tag - Visual Studio Marketplace

위의 두 개의 확장 프로그램은 HTML을 작성할 때 유용하게 사용할 수 있다.

HTML 대부분의 코드는 짝태그로 이루어져있는데

Auto Close Tag는 열림 태그를 작성하면 자동으로 닫힘 태그가 생성되고,

Auto Rename Tag는 짝 태그 중 하나만 수정하여도 자동적으로 나머지 태그가 같이 수정된다.

 

Color Highlight

Color Highlight - Visual Studio Marketplace

색상코드 문자에 배경색을 입혀 색이 한 눈에 보이도록 해준다.

 

Live Server

Live Server - Visual Studio Marketplace

수정된 내용을 브라우저에 적용하려면, 매번 브라우저를 새로고침 하거나 캐시를 삭제해야되는 번거로움이 있습니다.

이 플러그인은 새로고침 없이 실시간으로 변경된 값이 적용되게 한다.

 

사용방법)

1) 단축키 Ctrl + Shift + P로 cmd 창을 열어 live server:open with liver server를 입력

2) vscode창 오른쪽 하단 Go Live를 클릭

 

Thunder Client

Thunder Client - Visual Studio Marketplace

API 요청에 대한 결과를 확인 할 수 있는 확장프로그램이다.

이 프로그램은 Postman을 대신하여 VSCode에서 바로 테스트를 진행할 수 있고, 가볍다는 장점이 있다.