비주얼스튜디오코드(VSCode)에서 웹브라우저 실행하기

Visual Studio Code(VSCode)는 다양한 확장 기능을 통해 개발 환경을 효율적으로 개선할 수 있는 훌륭한 도구입니다. 웹 개발 시 HTML 파일을 브라우저에서 빠르게 열어보고 싶은 경우가 많은데, 이를 손쉽게 해주는 확장 기능 중 하나가 "Open in Browser"입니다. 이 확장 기능을 설치하면 단축키를 사용하여 현재 작업 중인 HTML 파일을 즉시 웹 브라우저에서 열 수 있습니다.

 

 

설치 방법

1. VSCode 마켓플레이스 접속

VSCode 마켓플레이스

VSCode에서 확장(Extension) 탭을 열거나, Ctrl+P(Command+P on Mac)를 누른 후 ext install을 입력하여 마켓플레이스에 접근합니다.

2. 확장 기능 검색 및 설치

VSCode에서 브라우저열기 설치

"Open in Browser"을 검색창에 입력하고 검색 결과 중 해당 확장 기능을 찾아 설치합니다.

 

사용 방법

1. 일반적인 사용

HTML 파일이 열려 있는 상태에서 Alt + B를 누르면 기본 웹 브라우저에서 현재 파일이 열립니다.

2. 브라우저 선택하여 열기

VSCode에서 단축키로 브라우저열기

Alt + Shift + B를 누르면 사용 가능한 브라우저 목록이 표시되고, 여기서 원하는 브라우저를 선택하여 파일을 열 수 있습니다.

3. 마우스오른쪽버튼으로 열기

VSCode에서 마우스 클릭하여 브라우저열기

파일에서 마우스 오른쪽 버튼을 클릭하면 "Open In Default/Other Browser" 항목이 나옵니다. 각 항목을 선택하면 원하는 브라우저로 실행 할 수 있습니다.

이 확장 기능을 사용하면 파일 탐색기를 열고 파일을 수동으로 찾아 브라우저로 드래그하는 번거로움 없이, VSCode 내에서 바로 HTML 파일을 웹 브라우저에서 빠르게 확인할 수 있습니다. 특히 웹 페이지 디자인이나 프론트엔드 개발 작업을 할 때 시간을 절약해주는 유용한 도구입니다.

 

주의사항

• 단축키 충돌: 다른 확장 기능이나 VSCode 자체 단축키와 충돌할 수 있으니, 충돌 발생 시 설정에서 단축키를 변경해 사용하세요.
• 브라우저 호환성: 기본적으로 시스템의 기본 브라우저를 사용하지만, 특정 브라우저를 선호하는 경우 설정에서 변경할 수 있습니다.

 

결론

"Open in Browser" 확장 기능은 웹 개발자들에게 매우 유용한 도구로, VSCode를 사용하는 개발자라면 반드시 설치해두면 좋을 확장 기능 중 하나입니다. HTML 파일 뿐만 아니라 다른 웹 파일들도 빠르게 브라우저에서 확인할 수 있어 개발 효율성을 크게 높여줍니다.