비주얼 스튜디오 코드 Live Server 설치하는 방법과 단축키

비주얼 스튜디오 코드에서 Live Server 설치하는 방법에 대해 알아보겠습니다.

비주얼 스튜디오 코드에서 설치할 수 있는 익스텐션 중에서 LIve Server라는 아주 유용한 익스텐션이 있습니다.

Live Server는 현재 작성하고 있는 코드를 실시간으로 보여주는 기능을 합니다.

자신의 코드가 웹 상에서 어떤식으로 그려지고 있는지 바로바로 확인할 수 있다면 아주 편리하겠죠?

그럼, 비주얼 스튜디오 코드(Visual Studio Code)에서 Live Server를 설치하는 방법과 단축키를 알아보겠습니다.

먼저 비주얼스튜디오코드를 키고, 왼쪽 아이콘(메뉴) 중에서 EXTENTSION을 클릭해주세요.

EXTENSION의 검색창에

LIVE SERVER라고 검색합니다.

바로 아래에 LIVE SERVER 익스텐션을 확인할 수 있습니다.

저는 이미 설치가 되어있는 상태라 인스톨 버튼이 없는데요,

원래는 사진의 톱이바퀴 아이콘 버튼 위치에 인스톨 버튼이 있답니다.

INSTALL을 클릭해 설치를 합니다.

설치가 완료되고

작성하는 코드의 화면에서 우클릭을 하면,

Live Server 메뉴가 생깁니다.

Open with Live Server

Stop Live Server

위 버튼을 클릭하면 Live Server 기능을 키거나 끌 수 있습니다.

---

Live Server 단축키

켜기 : Alt 키를 누른 상태로 L과 O를 차례로 누르면 됩니다.

끄기 : Alt 키를 누른 상태로 L과 C를 차례로 누르면 됩니다.

---

Live Server를 키면, 위와 같이 실시간으로 자신의 코드를 확인할 수 있게됩니다.

 

끝!