Visual Studio Code에서 유용한 Extensions

1. Live Server

 

 

제목 그대로 Live server를 열어준다. 웹브라우저로 열어주는데 HTML 코드 작성 및 수정시 저장하면 실시간으로 Live Server로 열은 웹페이지에서 반영이 된다. 새로고침이 필요없다.

 

 

실행방법은 설치 후에 HTML 문서 내에서 마우스 우클릭 -> Open with Live server를 클릭하면 된다

 

 

 

2. indent-rainbow

 

 

Visual Studio Code의 기본 들여쓰기 표현식은 너무 잘 보이지않는다. 이것을 빨주노초파남보 색상으로 구별해주어

가독성을 높여준다. 설치와 동시에 적용되며 적용후 모습은 아래와 같다.

 

 

들여쓰기 한 부분이 색상으로 표시되어 좀더 보기 좋아졌다.

 

3. Auto Rename Tag

 

 

이게 정말 좋은거같다. HTML는 시작태그와 끝태그가 일치해야한다

 

<table>로 시작했으면 </table>로 반드시 끝나야하는데. 시작태그나 끝태그를 수정할때 이를 동시에 작업할수 있게 도와준다.  indent-rainbow와 마찬가지로 설치와 동시에 설정이 완료되며

 

시작태그에서 글자를 추가하거나 지우면 끝태그에서도 자동으로 적용된다.