[vscode] 비주얼스튜디오코드 실시간 미리보기(ft. live server 플러그인 )

 

실시간 미리보기 확장 플러그인 설치 방법을

알아보겠습니다.

 

저는 웹에디터를 braket, atom, visual studio code, noto pad++, dream weaver 를 사용해 보았는데, 
최근에는 가독성과 UI 편리성의 이유로 visual studio code 또는 braket을 주로 사용하고 있습니다. 

Visual studio code는 마이크로소프트사에서 개발되었고,  
요즘 Atom과 함께 개인 뇌피셜로 가장 인기있는 에디터입니다.  
emmet기능이 자동 내장되어있고, 자동으로 닫는 tag가 setting에서 설정이 가능하여  
바로 프로그램 설치 후에 사용하기 쉽습니다. 

다만, braket에는 있지만, vscode에는 웹에서 실시간 미리 보기 기능을 제공하지 않아 
확장 플러그인, Iive server을 따로 설치해야 합니다.

 

Live Server 설치하기

 

· 에디터의 왼쪽 메뉴바에서 맨 아래에 위치한 확장자 아이콘 클릭-검색창에 live server 검색-install 클릭
· 설치 완료후 초록색 install버튼이 Uninstall로 변경됩니다.

 

오른쪽 클릭 후 Open with Live Server 클릭 또는 단축키 Alt+L Alt+O

 

그럼 live server에서 127.0.0.1:5500에 서버를 통해 마크업 된 html 파일을 보여줍니다.

 

live server 설치하기를 완성하였습니다.
이제 html을 바꿀때마다 동적으로 인터넷 브라우저를 자동으로 갱신해줍니다.

 

참고

가독성을 위한 코드 정리(들려쓰기) 단축키!

코드영역 드래그 후 ctrl K + F