소개

HTML 파일을 작성할 때 이전에는 한 번에 한 번 터미널에서 VSCode를 시작하고 파일을 편집 한 다음 Chrome에서 확인하는 번거로운 방법을 취했습니다. 게다가 평소에는 Vim을 사용하고 있기 때문에 VSCode를 사용할 기회는 그렇지 않습니다. 그러나 요전날, N예비교의 프로그래밍 학습 코스가 무료로 제공되고 있다고 하는 것으로, Web을 1회 제대로 만져 보고 싶게 되었습니다. 그런 이유로 HTML 파일의 브라우저 표시를 편하게 확인하기 위해 VSCode를 설정하고 싶습니다.

HTML 미리보기 설치

그렇다고해도, 하는 것은 지극히 간단합니다. VSCode 왼쪽의 마크를 선택하고, 「html preview」라고 검색하면 간단하게 VSCode의 확장 기능이 히트합니다

설치를 클릭합니다.
This extension is enabled globally「この拡張機能はグローバルに使用可能です」 라고 표시되었으므로, 조속히 사용해 봅시다!

VSCode 내에서 HTML 파일을 선택합니다.

이 상태에서 ctrl 를 누르면서 k , 그 후 ctrl 와 k 를 놓고 단독으로 v 를 두드립니다.



브라우저 표시할 수 있었습니다! 화면은 「태어난 나이로부터의 초수를 표시하는 페이지」입니다. 이 HTML Preview입니다만, JavaScript로 붙인 움직임도 표시해 주는 것 같습니다! (Tex 파일 등에도 대응하고 있는 Preview 확장을 넣어도 JavaScript의 동작을 확인할 수 없었습니다.) 웹 페이지를 만들 때 꽤 효과적인 기능이 아닐까요.

※나, 리포트류 전부 Tex 파일로 써 Git 관리하고 싶다고 생각하고 있습니다만, Tex 대응하고 있는 확장의 분을 넣어도 HTML Preview는 제대로 움직였습니다. 여러 칼류가 좋네요.

참고

Visual Studio Code로 html 코딩은 실시간 미리보기가 매우 좋다
htps : ///루이-ぉg. 코 m / vs 코데 - HTML - 코 r g / # VS 코 데 마