[비주얼 스튜디오 코드(Visual Studio Code)] live server - 회복맨 블로그

[비주얼 스튜디오 코드(Visual Studio Code)] live server

에디터/비주얼 스튜디오 코드(Visual Studio Code) 2017.09.22 13:04

vscode 도 live. server 기능을 사용할 수 있습니다.

동일한 기능을 하는 다른 에디터의 패키지

아톰 : http://recoveryman.tistory.com/302

브라켓 : http://recoveryman.tistory.com/139

웹스톰 : http://recoveryman.tistory.com/359


live server 패키지는 에디터 에서 저장을 하는 즉시 브라우저에 반영이 됩니다

아래 GIF 처럼 사용합니다.





설치 : 컨트롤 + 쉬프트 + X -> 좌측 상단 검색창에 live server 검색 Live Server 설치 클릭





설치가 되었으면 버튼이 '다시 로드' 로 바뀜니다. 다시 로드를 클릭해 줍니다.





창을 다시 로드하겠냐고 뜨는데 해줍니다. 그래야 제대로 적용이 됩니다.





단축키는 Alt + L 을 먼저 누른뒤 O 를 눌러주면 웹서버가 동작중인 브라우저 창이 열립니다. 현재 보고 계신 페이지가 열립니다.

문서를 수정하고 난 뒤 저장하면 브라우저창에 수정된 내용이 반영되어 있습니다.


댓글 7

  • 초보자 (2018.08.22 17:16)

    live server를 실행시키면 오른쪽 하단에 open a folder or workspace 가 뜨면서 안되는데 이건 어떻게 해결해야할까요?

    • 회복맨 (2018.08.22 17:24 신고)

      안녕하세요 방문해 주셔서 감사합니다.
      질문자 님의 작업 환경을 제가 잘 몰라서 현재 페이지의 스크린샷 등을 첨부해서 문의 주시면 확인해 보겠습니다.

      mahan89@daum.net

    • 초보자 (2018.08.22 17:35)

      이메일 보냈습니다 확인 부탁드릴게요!

    • 회복맨 (2018.08.22 17:47 신고)

      HTML 파일을 안만드신거 같아요.
      독타입 선언하고 기본 HTML 뼈대 만들고 H1 태그 한번 써보시고 꼭 '저장' 한번 해주시고 테스트 한번 해보세요

    • 회복맨 (2018.08.22 17:48 신고)

      때에 따라선 프로그램을 종료 후 다시 실행시켜서 해야할 수 있습니다.

  • kyenwon (2019.05.06 21:48)

    liver server 단축키 눌러서 실행하면 explore 창이 기본으로 나오던데요, 혹시 크롬으로 기본설정 변경할 수 있는 방법이 없을까요?

    • 회복맨 (2019.05.06 22:54 신고)

      https://support.google.com/chrome/answer/95417?co=GENIE.Platform%3DDesktop&hl=ko

      이거대로 따라 하시고 실행하시면 됩니다.

      이 패키지는 자신의 컴퓨터에 설정 되어 있는 기본 브라우저를 따라 갑니다.
      질문자 님께선 IE브라우저를 기본 브라우저로 설정했기 때문에 그렇게 사용이 된듯 합니다.

      방문해 주셔서 감사합니다.