728x90
728x170
VS Code 에디터 안에 Live Server를 넣는 방법
들어가며
- VS Code에서 HTML 코드를 작성할 때, Liver Server를 통해 확인하면서 보는 경우가 있다.
- 코드의 실행 결과가 새로운 웹 브라우저의 창에 기본적으로 열리게 되는데, 웹 브라우저 창과 VS Code 프로그램에서 번갈아 움직이면서 작업하기가 불편한 경우가 발생한다.
- 이럴 때, VS Code 안에 라이브 서버(Live Server)를 넣는 방법이 있다.
방법
- HTML 소스 코드에 마우스 커서를 올린 후 [마우스 오른쪽 버튼] > [Open with Live Server] 항목을 클릭한다.
- 코드의 실행 결과가 새로운 웹 브라우저 창에 열리는데, 해당 웹 브라우저 창의 주소(URL)을 복사한다.
- VS Code에서 [Ctrl] + [Shift] + [P]를 눌러서 명령 팔레트를 실행시킨 후, [Simple Browser: Show] 항목을 클릭한다.
- 아까 복사했던 URL을 붙여 넣은 후, [Enter] 버튼을 누른다.
- 라이브 서버가 VS Code 안에서 실행되는 것을 확인할 수 있다.
참고 사이트
https://stackoverflow.com/questions/68325778/can-i-use-live-server-inside-vscode-editor
Can I use Live Server inside Vscode editor?
I know live server opens with a browser. But is it possible to open it inside editor? Like I split the editor window with two .js files.
stackoverflow.com
728x90
그리드형(광고전용)
'Program > Visual Studio Code' 카테고리의 다른 글
| [VS Code] 맥(Mac)에서 터미널 폰트 크기 조정하는 방법 (1) | 2023.09.21 |
|---|---|
| [VS Code] 비주얼 스튜디오 코드 다크/라이트 모드 자동 전환 기능 켜는 방법 (Auto Detect Color Scheme) (0) | 2023.05.16 |
| [VS Code] 비주얼 스튜디오 코드 표시 언어 변경 방법 (0) | 2023.02.06 |
| [VS Code] 비주얼 스튜디오 코드 커스텀 스니펫(Snippet) 만드는 방법 (0) | 2022.11.15 |
| [VS Code] 비주얼 스튜디오 코드 에러 메시지 출력시키는 방법 (0) | 2022.11.09 |
| [VS Code] 자동 줄바꿈 기능(Word Wrap) 켜는 방법 (0) | 2022.09.10 |
| [VS Code] 폰트 설정하는 방법 (0) | 2020.11.04 |
| [VS Code] 비주얼 스튜디오 코드 단축키(Visual Studio Code Hotkeys) (0) | 2020.09.25 |
starrykss
별의 공부 블로그 🧑🏻💻
