Vs Code 작업속도 빠르게 하는 법!(확장 프로그램)

목차

 

확장 프로그램

 

확장 프로그램이란

보다 편리한 개발환경을 위해 추가적으로 설치할 수 있는 프로그램

 

설치방법

Visual Studio Code를 열어

좌측 중앙의 확장 프로그램 아이콘을 눌러준다

(단축키 Ctrl + Shift + X)

 

설치하고 싶은 프로그램을 검색한다

 

설치할 프로그램을 선택한다.

화면에 뜨는 프로그램 상세 내용을 통해

내가 원하는 프로그램이 맞는지 확인 후, 설치 버튼을 눌러 설치한다.

 

확장 프로그램을 적용시키기 위해

Visual Code를 다시 켜야 하는 프로그램도 있다는 걸 알아두자.

(우측 하단에 알림 창이 뜬다.)

 

추천 확장 프로그램

 

가독성 향상

 

Bracket Pair Colorizer

괄호마다 다른 색을 입혀 구분하기 쉽게 해 준다.

주로 괄호를 열었다가 어디까지가 괄호 안인지 인식하기 위해 사용한다.

(코드 짤 때는 대수롭지 않을 수 있지만 수정할 때는 값을 톡톡히 한다.)

 

indent-rainbow

들여 쓰기의 단계에 따라 색을 다르게 두어

가독성을 상승시킨다.

 

자동 코딩

 

Auto Rename Tag

여는 태그나 닫는 태그 중 하나를 수정하면 나머지 태그를 자동으로 수정해준다.

예로 들어 p에서 h5로 변경하려고 했을 때,

<p>
    보고, 못 별에도 아무 계십니다. 이웃 보고, 봄이 된 하나에 있습니다. 
    이름자를 된 무덤 까닭이요, 밤이 있습니다. 경, 새워 이름을 이런 다 거외다. 
    어머니, 많은 이름자 패, 다 애기 다 노루, 어머님, 까닭입니다. 
    것은 까닭이요, 나는 시인의 이름과, 많은 겨울이 소녀들의 지나고 계십니다. 
    무성할 써 나의 어머니, 비둘기, 걱정도 풀이 이름을 버리었습니다. 
    멀리 내린 옥 별 쉬이 별에도 내일 까닭입니다. 
    하나 별을 위에 겨울이 멀듯이, 릴케 봅니다. 어머니 새겨지는 하늘에는 봄이 있습니다. 
    가을로 패, 이름과, 하나 새겨지는 그리고 멀듯이, 까닭입니다.
</p>

만약 확장 프로그램이 없다면 여는 태그를 수정 한 다음 수많은 텍스트와 태그를 구별하여

닫는 태그를 찾아 수정해야 한다.

하지만 이 확장 프로그램은 그걸 해결해준다.

 

자동 코드 실행

 

liveServer

 

웹 코딩을 변경할 때마다 자동으로 코드 저장/ 실행시킨 웹을 새로고침 해준다.

설치하고 나서 실행하고자 하는 웹코드 파일에서

우클릭을 하여 Open with Live Server를 누르거나,

우측 하단의 Go Live 버튼,

Alt + L을 누른 다음 Alt + O를 순차적으로 누르면 실행된다.

 

끝