HTML 비주얼 스튜디오 코드 추천 확장기능

이전에 앞서 비주얼 스튜디오 코드를 설치하는 방법과 그걸로 HTML 문서를 만드는 것 까지 보셨을겁니다.

그러나 확실히 메모장보다 편하긴 하지만 그래도 아직 부족한 점이 있습니다.

개중에 하나가 html 코드 테스트인데요.

클릭 시 원본으로 볼 수 있습니다.

아무래도 저런 식으로 탐색기를 따로 열어서 일일이 문서를 여는 것은 귀찮기 마련입니다.

물론 최소화를 사용하여 아래로 내렸다 필요 시 다시 볼 수 있는 방법으로 하면 되겠지만, 번거롭기 짝이 없지요.

그러니 단축키로 빠르게 웹 브라우저를 열어 테스트하는 부가기능을 추가하도록 하겠습니다.

이전에 한글설정하듯이 왼쪽의 5번째 아이콘을 클릭해서 검색창에 다음과 같은 단어를 입력합시다.

아래의 리스트 중 맨 위의 open in browser를 설치해줍시다.

이 부가기능은 단축키 Alt + B를 이용하여 빠르고 쉽게 문서를 열 수 있는 기능입니다.

기본적인 사용법은 편집창에서 마우스 우클릭으로 Open In Default Browser를 클릭하면 됩니다.

이를 클릭하여 실행 시 지정된 웹 브라우저로 열리게 됩니다.

만약 자신이 다른 브라우저로 열어보고자 한다면 Open In Default Browser를 클릭하거나,

Shift + Alt + B로 리스트에 뜨는 브라우저 중 하나를 선택하여 열 수 있습니다.

그리고 코드를 쓰다보면 너무 길어져서 아래와 같이 글이 창 밖으로 나가서 가려지게 됩니다.

클릭 시 원본으로 볼 수 있습니다.

화면이 작은 컴퓨터나 태블릿으로 작업하려면 매우 불편해집니다.

이를 자동 줄바꿈 기능을 활성화하여 보기 편하게 만들어주도록 해줍시다.

좌상단의 "파일" 탭 - "기본 설정" - "설정"을 차례로 클릭합니다.

단축키는 Ctrl + , 입니다.

검색창에다 wordwrap를 입력 후 아래의 Word Wrap의 리스트 박스를 on으로 설정합니다.

텍스트가 화면을 넘어가면 자동으로 줄을 바꿔줌을 확인할 수 있습니다.

마지막으로 태그를 자동으로 붙여주는 기능을 추가하도록 하겠습니다.
이름은 htmltagwrap로 맨 처음의 open in browser를 적용할 때 처럼 마켓 플레이스에서 검색하여 받을 수 있습니다.

사용 방법은 별거없이 해당 코드를 드래그 한 후 Alt + W 를 눌러 원하는 태그를 입력하시면 됩니다.

이하는 제가 쓰는 부가기능들입니다.

편의기능이지만 굳이 필수는 아니므로 취향껏 쓰시면 되겠습니다.

Bracket Pair Colorizer : 중괄호, 대괄호 등을 각각 다른 색깔로 표시

HTML Snippets : html 자동완성 기능

Power Mode : 입력 시 이펙트 추가