Visual Studio Code [플러그인] - 웹 페이지 개발

 

 

html 과 css 개발할때 제일 불편한 점은 html/css 코드를 수정하며 그 결과를 바로바로 확인하는데 불편함이 있다

그렇기 때문에 여러 개발 IDE에서는 이 불편함을 개선하여 실시간으로 수정 결과를 확인할 수 있는 기능을 제공한다.

 

 

그러나 아쉽게도 현재 사용중인 VSC에서는 자체 기능으로는 지원하지 않는다 다만 확장 플러그인 추가 함으로써 이 기능을 사용할 수 있다.

 

- Open in Browser

https://marketplace.visualstudio.com/items?itemName=igordvlpr.open-in-browser&ssr=false#overview 

Open in Browser - Visual Studio Marketplace

 

- View in Browser

https://marketplace.visualstudio.com/items?itemName=qinjia.view-in-browser 

View In Browser - Visual Studio Marketplace

 

- Live Server 

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 

Live Server - Visual Studio Marketplace

위의 플러인은 웹페이지 개발에 일반적으로 많이 사용하는 플러그인이다 ( 물론 다른 많은 플러그인이 있다....)

 

 

 

이중 Open in Browser와 View in Browser 아쉽게도 실시간으로 수정 결과를 확인하는데 살짝 불편함이 있다 

코드 수정 후 새로고침을 한번더 눌려주어야 한다

코드 수정후 Alt+ B를 눌러도 결과를 확인할 수 있지만 누를 때마다 새로운 창이 열리게 된다.

 

 

 

 

이러한 불편함은 Live Server 플러그인을 사용하면 쉽게 해결할 수 있다.

 

Open in Browser, View in Browser와는 달리 코드 수정 후 저장만 누르게 되면 자동으로 실시간 결과를 반영 시킨다.

그렇기 때문에 코드 수정할 때마다 새로운 창을 실행하여 결과를 확인할 필요가 없게 된다.

 

 

 

플러그인 추가는 간단하게 추가하여 사용할수 있다.

 - 파일 -> 기본설정 -> 확장

 - 단축키 Ctrl + Shift + X

 - Side bar 확장 버튼           

누르게 되면 확장 플러그인 관리 페이지를 확인할 수 있다.

이 페이지에서 검색 후 다운로드 후 사용하면 된다.