[비주얼 스튜디오 코드(Visual Studio Code)] View in Browser

비주얼 스튜디오 코드는 다른 IDE 나 에디터 처럼 단축키 한번에 작업중인 웹사이트를 볼 수 있습니다.

이 기능을 하는 확장 기능의 이름은 '뷰 인 브라우저(View in Browser)'입니다.

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

서브라임 텍스트 : http://recoveryman.tistory.com/8

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

확장 기능 설치도 굉장히 쉬운편입니다.

이 화면은 비주얼 스튜디오 코드 설치 후 나온 화면입니다.

여기서 상단 보기 -> 확장 을 클릭해 주시거나 단축키 컨트롤 + 쉬프트 + X 를 눌러봅니다.

그럼 좌측에 마켓플레이스 리스트가 나옵니다. 상단에 확장 기능을 검색할 수 있습니다.

view in browser 을 검색해 봅니다.

그러면 리스트의 1번의 확장 기능이 바로 view in browser 입니다.

view in browser 을 클릭하면 우측의 화면이 바뀝니다.

오측 화면에  설치  버튼이 있습니다. 그걸 클릭하면 확장 기능을 설치합니다.

(좌측 리스트에서 설치 버튼이 있는데 우측 설치 버튼과 똑같습니다.)

확장 기능의 설치가 끝났으면 에디터를 다시시도 하라고 버튼이 바뀝니다.

좌측 리스트의 다시 로드 를 클릭하든 우측 화면의 다시 로드를 클릭하든 상관없이  다시 로드  를 눌러줍니다.

그러면 이런 경고창이 뜨는데 다시 로드를 해야 해당 기능을 사용할 수 있습니다.

에디터 재시작이 완료되었습으면 해당 기능의 단축키를 알아보기 위해 좌측 리스트의 설치한 패키지를 선택해 봅니다.

우측의 화면이 바뀔텐데 여기서 Keybindings 의 단축키가 바로 뷰 인 브라우저의 단축키 입니다.

다른 확장 기능하고 단축키가 충돌날 가능성 때문에 저는 단축키를 바꾸지 않고 그냥 컨트롤 + F1을 그대로 사용하겠습니다.

설치한 확장 기능이 정상 기능이 정상적으로 동작하는지 테스트 하기 위해 좌측 상단의 파일을 눌러

파일 열기 또는 폴더 열기를 진행해 줍니다.

우측 화면이 HTML 코드로 바뀌면 우측 화면에 커서를 찍고 컨트롤 + F1 버튼을 눌러줍니다.

정상적으로 잘 적용되었습니다.

좌측 화면이 항상 켜져 있으면 거슬리니까 좌측 상단에 오른쪽 클릭을 해서 사이드 막대 숨기기 메뉴를 선택합니다.