본문 바로가기
개발언어/VScode

[VScode] 라이브서버(Live Server) 설정하기

by 창용이랑 2022. 8. 2.
728x90

Visual Studio Code(현재 1.34.0버전, 이후 VS Code로 표기)에서 라이브 서버를 설정하는 방법에 대해 살펴보자.

라이브 서버를 이용하면 파일 수정 후 저장하면 수정된 내용이 바로 저장된다.

 

1. 라이브 서버 설치하기

2. 라이브서버 테스트하기

 

1. 라이브 서버 설치하기

  • VS Code 실행 후 파일 > 기본설정 > 확장 메뉴를 클릭한다.
  • 또는 단축키로 Ctrl + Shift + X를 같이 누른다.

 

 

  • 검색창에서 live server를 검색 설치버튼을 클릭한다.

 

2. 라이브 서버 테스트하기

  • 왼쪽 상단에 탐색기 아이콘 클릭하여 확장 메뉴 제거한다.

 

  • 탐색기에서 폴더 열기를 클릭하여 열 폴더를 지정한다.

 

  • 새파일 아이콘을 클릭 후 파일명에 test.html을 입력하여 html 파일을 생성한다.

 

 

  • 좌측 코드 탭에서 html:5를 입력하면 자동완성이 되는데 엔터를 쳐서 기본 코드를 생성한다.

 

 

  • 좌측 코드 탭을 우클릭한 후 Open with Live Server 메뉴를 클릭한다.
  • 또는 단축키로 Alt + L 입력 후 Alt + O를 누른다.

 

  • 실행결과

 

 

출처: https://stajun.tistory.com/entry/Visual-Studio-Code-라이브서버Live-Server-설정하기 [내숭이:티스토리]

'개발언어 > VScode' 카테고리의 다른 글

VisualStudio Code 단축키  (0) 2021.10.01