vscode에서 html과 javascript, css를 사용하여 개발시 유용한 웹페이지 미리보기 플러그인에 대해서 설명합니다.
- live html preview 설치
- 설치된 plug-in 활성화
live html preview 설치
몇 가지 설치해 보았으나, 잘 안되거나 이상해서 지우고 live preview를 설치하였습니다.
vscode 제일 왼쪽 바에서 가장 아래 모양을 누르면 설치할 수 있는 플러그인이 나옵니다. 여기서 Live Preview를 설치하였습니다.
설치된 plug-in 활성화
설치가 완료되면 vscode의 제일 위쪽 우측에 돋보기 모양이 나타납니다. 제일 위에서 한칸 아래에 있는 돋보기를 누르셔야 합니다.
이 버튼을 누르면 활성화 되고 미리보기를 확인하실 수 있습니다.
저는 테스트 용으로 다른 분의 코드를 확인해 보았는데, 우측 미리보기 화면에서 수행도 가능하고 javascript도 동작합니다. 그냥 브라우저와 동일하게 보실 수 있습니다.
.png)
