[비주얼 스튜디오 코드(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 를 눌러주면 웹서버가 동작중인 브라우저 창이 열립니다. 현재 보고 계신 페이지가 열립니다.

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


댓글 10

  • 초보자 (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브라우저를 기본 브라우저로 설정했기 때문에 그렇게 사용이 된듯 합니다.

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

  • 자바스크립트 왕초보 (2019.07.08 14:36)

    안녕하세요?
    초면에 염치불구하고 질문을 하나 드립니다.
    비주얼스튜디오코드에서 live server를 실행시키면 메일로 보낸 화면이 뜹니다.
    node.js도 설치했고 .NetFramework의 버전도 4.7이상인것을 regedit에서 확인했습니다.

    몇일째 고생하고 있는데... 이유를 모르겠네요. 참고로 집의 PC에서는 5501포트로 연결이 되어서 라이브 서버가 잘 수행됩니다만
    지금 글을 작성하고 있는 노트북(IBM요가)에서는 메일로 보내드린 에러가 뜹니다.

    혹시 원인을 알고 계시다면 답신을 주시면 정말 감사하겠습니다.
    참고로 기본 브라우저는 크롬으로 설정해놓은 상태입니다.


    mahan89@daum.net 메일로 에러화면을 보내드립니다.
    여기에 바로 붙여넣으려 했으나 잘 안되네요.. --;;
    번거로우시겠지만 메일로 답신을 부탁드릴께요..

    • 회복맨 (2019.07.10 14:42 신고)

      저도 처음보는 증상이네요. ㄷㄷ

      브라우저 주소창에
      localhost:5500
      이렇게만 쳐서 어떤 화면이 나오는 지도 볼 수 있을까요?

  • domie (2019.07.25 09:56)

    좋은 정보 감사합니다.