비주얼스튜디오 작성 코드 브라우저에서 열기 설정 방법

비주얼스튜디오코드_브라우저열기_썸네일

 
VSCODE를 처음 사용하는 경우 작성한 코드를 실행했을 때 비주얼 스튜디오 프로그램 내부에서 미리보기가 실행되는 경우가 있습니다.
크롬이나 IE같은 브라우저 환경에서 코드를 실행해보고 싶을 때는 아래의 방법대로 설정하시면 됩니다.
 

비주얼스튜디오코드_브라우저열기_1

 
비주얼스튜디오를 실행한 후에 좌측 메뉴 중 가장 아래쪽에 있는 Extentions 메뉴를 선택해주세요.
 

비주얼스튜디오코드_브라우저열기_2

 
VSCODE Extentions 중에는 개발에 유용한 종류들이 꽤 다양해요.
좋은 Extentions들이 많지만 오늘은 그 중에서 브라우저 환경에서 코드를 실행할 Extentions을 받아서 사용해보겠습니다.
검색창에 'browser'를 검색하면 제일 상단에 나오는 'open in browser'라는 항목을 찾을 수 있습니다.
목록 우측의 Install 버튼을 눌러서 다운받아주세요.
 

비주얼스튜디오코드_브라우저열기_3

 
설치가 완료되었다면 이제 코드를 실행해봅시다.
위의 화면처럼 Open In Default Browser를 선택해서 실행해도 되지만 매번 선택하기 귀찮으니 Alt+B 정도의 단축키는 외워두면 편리하게 사용하실 수 있습니다.
 

비주얼스튜디오코드_브라우저열기_4

 
간단하게 test라고 적었던 코드가 정확하게 브라우저 환경에서 실행된 걸 확인할 수 있습니다.