Live Preview : VSCode에서 HTML 파일 미리 보기를 위한 Extension

 

VSCode를 사용할 때 작성한 html, javascript의 동작 결과를 보고 싶을 때가 있습니다. 즉, 파일의 미리 보기를 하고 싶은건데요, 이럴 때 시도할 수 있는 방법이 몇 가지 있습니다. 다 언급할 것은 아니고 그 중 몇가지 시도를 해 보고 제일 나았던 것에 대한 아주 짧은 결론을 기록해 둡니다.

 

 

결론.VSCode Extension  'Live Preview'  설치

 

다른 것들도 많이 있지만 VSCode 제조인 Microsoft에서 만든 것이고 가장 많이 사용되고 있습니다. 

그림 : VsCode Extension 중 Live Preview 설치

 

Live Preview 사용 방법

 

미리 보기를 하고자 하는 파일을 연 후 화면 우측 상단에 있는 'Show Preview' 버튼을 클릭합니다. 

그림 : 'Show Preview' 버튼이 생겼음

 

그러면 아래 화면과 같이 별도 Preview 창이 열립니다. 아주 잘 동작합니다. 

그림 : HTML 파일 Preview 지원