[VSCode] Live Server 자동 새로고침 설정 (일일이 저장하지 말고 바로바로 확인 가능!)

안녕하세요. 멀배야 입니다!

 

오늘은 VSCode에서 일일이 저장하지 않고도 실시간으로 변경 사항을 볼 수 있는 설정에 대해 알려드리도록 하겠습니다.

 

우선 Visual Studio Code 실행 후, 좌측에 있는 네모 아이콘을 클릭하면 확장 프로그램 설치 창이 나옵니다.

확장 프로그램 단축키 Ctrl + Shift + X

Live Server 검색 후 해당 플러그인을 설치해주세요. (저는 이미 설치를 해놔서 설치 아이콘이 뜨지 않습니다.)

여기까지 진행되었다면 코드 작성 후, 저장하고 Open with Live Server (단축키 Alt + L  + Alt + O)를 통해 실시간 미리보기를 할 수 있습니다. 하지만 제가 알려드릴 방법은 일일이 저장, 새로고침을 하지 않고도 자동 저장, 자동 새로고침이 되어 실시간으로 변경사항을 확인할 수 있는 방법입니다.

 

좌측 하단의 톱니바퀴를 눌러 Settings (단축키 Ctrl + , (콤마)) 를 클릭.

 검색창 (Search settings)에 auto save 검색.

off -> afterDelay로 변경.

이제 소스코드 우측 하단의 Go Live / 마우스 우클릭 - Open with Live Server (단축키 Alt + L  + Alt + O) 으로 실시간 미리보기 화면을 띄우고 소스를 변경해보시면 수정할 때마다 자동 새로고침이 되어 화면에 나타나는 것이 보일겁니다.

감사합니다!