Subelime Editor 도 좋은 에디터이지만, 처음 이용하실 때 파일명을 저장한다든지 몇몇 어려움을 겪으시는 분들의 질문 글을 보게 되었습니다.

그래서 제 기준으로 사용이 용이하다고 생각하는 Visual Studio Code 설치에 대한 글을 간단히 작성해보려고 합니다.

아래 사진은 맥 환경에서 찍은 스샷입니다. 제가 추가로 설치한 Extension 때문에 기본 설치시 화면이 조금 다를 수 있습니다.

1 . https://code.visualstudio.com/ 에서 OS에 맞게 Download 를 받고 설치를 합니다(기본적으로 OS에 맞는 버젼을 다운로드 해줍니다).

2 . 설치를 한 후 Visual Studio Code(이하 vs code)를 실행합니다.

3 . 학습할 때 유용한 Extension 을 설치해보겠습니다. Live Server 를 검색한 후 Install 을 합니다. 이 Extension은 코드를 수정 후 저장할 때 마다 브라우저에 변경사항을 반영하여 출력되게 해줍니다

4 . Install 이 완료되었으면 이제 코드를 작성할 폴더를 하나 만들어보겠습니다. 아래 그림처럼 Open Folder 를 이용해 작성할 폴더를 만들거나 불러오셔도 되고 ㅉWindow 같은 경우엔 탐색기에서, Mac 은 Finder에서 폴더를 드래그해서 끌어다가 쓸 수도 있습니다.

5 . 그럼 아래와 같이 폴더가 등록될 것입니다. 마우스 우클릭(맥은 터치패드 두 손가락 터치) 등을 통해 새 파일을 작성하고 저장하여 index.html 파일을 완성했습니다. ! 입력 후 Tab 키를 눌려주시면 기본적인 Doctype 를 포함한 태그가 생성이 됩니다. 그 후 간단한 코드를 추가해봤습니다.

6 . 파일을 저장 (Windows 는 Ctrl + S, 맥은 Command + S ) 후 파일을 우클릭 하면 아래와 같이 Open with Live Server 가 뜹니다. 이를 클릭해주면 브라우저가 실행되면서 작성한 코드를 렌더링한 페이지가 화면에 보이게 됩니다.

7 . 앞으로 코드 수정 후 저장 만 하게 되면 브라우저에 변경사항이 반영됩니다. 간단한 페이지 같은건 아래 사진과 같이 화면을 분할해서 작성과 동시에 변경된 내용을 확인하며 코딩할 수도 있을 것 입니다.

Live Server 이외에도 유용한 Extension 이 많습니다. Auto Tag 역시 설치해보셔도 좋을 것 같습니다. 설치 시 어려운 부분이 있으면 이 글에 댓글을 남겨주세요^^