[Vscode] HTML 실시간 미리보기

설치

vscode에서 확장 프로그램 Live Server를 설치한다.

• 이미 설치가 되어있어 uninstall이 나오지만 설치되어있지 않을 경우 install이 나온다.

실행하기

소스 코드에서 마우스 우클릭 후 Open with Live Server를 클릭한다.

단축키

• Windows 단축키 → Alt + L, O
• Mac 단축키 → Command + L, O

확인하기

http://127.0.0.1:5500/ 를 통해 수정된 HTML을 확인 할 수 있다.

추가설정

따로 저장, 새로고침 없이 바로 반영되는 것을 보고 싶으면 아래 내용을 따라하면 된다.

    1. vscode 설정에 들어간다. (단축키 → Ctrl + ,)

 

    2. 검색창에 auto save를 검색한다.

    3. Auto Save를 afterDelay로 변경한다.

    4. Auto Save Delay를 600으로 변경한다.(1000 → 1초)

    5. 저장 후 html를 수정하면 저장, 새로고침 없이 변경되는 것을 확인 할 수 있다.