비주얼 스튜디오 코드 기초 - 1. 화면 인터페이스 구성
코드 에디터는 특별히 프로그램 코드를 작성하는데 최적화 된 텍스트 편집기 프로그램입니다.
코드 에디터를 사용하면 HTML, CSS, Javascript, C#, Java 등 많은 언어로 작성된 파일을 쉽고 편하게 작성하고 수정할 수 있습니다.
일반 텍스트 에디터와 가장 다른 점은 코딩에 필요한 편리한 여러가지 기능들을 기본 내장하고 있는 것입니다.
폴더 단위의 프로젝트 관리, 다양한 코딩 언어에 대한 컬러링, 문법 오류 체크, 외부 컴파일러와의 연동, 코드 힌팅, 코드 자동 완성, 코드 들여쓰기 및 포매팅, 디버깅과 같은 코딩을 위한 기능들을 대부분 기본 내장하고 있습니다.
가장 많이 사용하는 코드 에디터.
사실상 코드 에디터의 표준인 에디터.
확장 프로그램을 통해 우리가 아는 모든 개발 언어 지원이 가능하며, 수 많은 편의 기능을 제공하는 수 십만 개의 확장 프로그램을 사용할 수 있습니다.
비주얼 스튜디오는 오픈소스며 무료 배포 프로그램입니다.
비주얼 스튜디오 코드는 윈도우, 맥OS, 리눅스를 지원하기 때문에 거의 모든 PC에서 사용이 가능하며, 확장 프로그램 또한 호환성을 유지합니다.
디버거를 내장한 통합 개발툴(IDE)를 필요로 하지 않는다면, 코딩을 하는데 가장 좋은 프로그램은 비주얼 스튜디오 코드입니다.
특히, HTML, CSS, Javascript와 같은 웹 프론트엔드 코딩을 위한 코드 에디터를 찾는다면 단연 비주얼 스튜디오가 최고의 에디터입니다.
설치
다음 경로에서 설치 파일을 다운로드 받은 후 실행합니다.
code.visualstudio.com/
설치 경로와 옵션은 기본 설정을 사용하는 것을 추천합니다. 재설치 하면 옵션 값을 다시 변경할 수 있습니다.
프로그램 자체가 상당히 가볍기 때문에 설치 경로 선택 및 탐색기 컨텍스트 메뉴와 연결하는 등의 옵션 몇가지만 선택하면 됩니다.
화면 인터페이스 구성
비주얼 스튜디오를 실행하면 다음과 같은 기본 화면 상태로 실행됩니다.
폴더를 선택해 열면 왼쪽에 폴더 안의 파일 목록이 표시되고 오른쪽에 소스창이 위치하는 전형적인 개발툴의 형태가 됩니다.
비주얼 스튜디오 코드는 다른 코드 에디터들과 동일하게 폴더 단위로 프로젝트를 처리합니다.
개별 파일을 직접 열어서 편집기로 사용할 수 있지만, 기본적으로 폴더를 선택해 폴더 안에 포함된 파일과 리소스를 열어 코드 작성을 하는 것을 기본 사용법으로 합니다.
툴바
비주얼 스튜디오 코드 전역으로 가장 많이 빈번하게 사용하고, 중요한 도구를 모아놓은 기능 막대입니다.
아이콘은 고정이며, 각각 다음과 같은 기능을 합니다.
- 탐색기 창 토글 - 비주얼 스튜디오 코드 탐색기 창을 표시/감춤 합니다. 프로젝트 폴더 열기로 폴더를 선택하면 기본으로 표시되는 탐색기 창을 보이지 않도록 해서 파일 편집 창을 크게 하고 싶을 때 사용할 수 있습니다.
- 폴더 전체 파일 검색 - 현재 폴더 안의 모든 검색 가능한 텍스트로 된 파일 내용을 검색해 그 결과를 목록으로 표시합니다.
- 소스컨트롤 - 깃 등의 소스컨트롤 프로그램이 설치되어 있어야 하며, 소스 컨트롤 프로그램과 연동해서 소스 컨트롤을 합니다. 리포지토리 생성이나 커밋을 하는 등의 소스 컨트롤 프로그램을 사용하는 기본 방법을 먼저 알아야 합니다.
- 디버그/실행 - launch.json 에 컴파일 및 디버깅 설정 정보를 등록한 경우 디버그 및 컴파일 된 실행파일 실행, 또는 웹페이지를 웹서버에서 확인할 수 있습니다.
- 확장 프로그램 관리 - 비주얼 스튜디오 코드의 확장 프로그램을 검색하고 추가/삭제/사용/미사용 등의 확장 프로그램 제어를 할 수 있습니다. 비주얼 스튜디오 코드의 확장 프로그램은 수십만 가지가 넘으며, 세상에 존재하는 모든 개발 언어를 지원하는 다양한 확장 프로그램이 있습니다.
탐색기(EXPLORER)
프로젝트로 선택한 폴더 안의 파일 목록을 표시합니다.
전체 파일 목록과, 모든 리소스 파일이 표시되며, 추가로 현재 열린 파일 목록을 따로 표시합니다. 인식 가능한 파일 확장자는 파일 아이콘을 왼쪽에 표시해 파일의 타입 식별이 쉽도록 해줍니다.
트리 구조로 표현되는 폴더 파일 목록 위에는 현재 열린 소스 파일 목록이 별도로 표시됩니다. 열린 파일이 많아서 탭으로 모두 표현이 되지 않을 경우, 스크롤로 탭을 이동해 파일 창을 확인하는 것보다는 왼쪽의 "열려있는 편집기(OPEN EDITORS)"에서 확인하는 것이 좀 더 수월할 수 있습니다.
프리뷰/스크롤/검색 결과 위치 미리보기
소스파일 전체를 프리뷰로 구조를 보여주는 화면입니다.
프리뷰 창 자체로 스크롤바의 역할을 하기 때문에, 대충의 소스 위치를 짐작해 소스를 이동하는데 도움이 됩니다.
소스 문자열 검색을 한 경우, 검색한 검색 결과가 일치하는 문자열에 하이라이트 되는 것과 동일하게, 프리뷰 창에도 해당 행 위치에마킹이 되어, 소스 코드 전체에 검색 결과가 어느 위치에 있는지를 파악할 수 있도록 해줍니다.
한글 인터페이스 지원
많은 비주얼 스튜디오 코드의 기능들이 별도의 확장으로 제공됩니다.
사용자 인터페이스 또한 각 언어별로 별도의 확장을 설치해서 사용합니다.
확장 검색 입력 난에 "korean" 을 입력하면 맨 위에 "Korean Language Pack for Visual Studio Code" 이 검색됩니다.
확장 설치 후, 재실행 하면 모든 인터페이스가 한글로 변경됩니다.
영어 화면 인터페이스 사용이 어려운 경우 한글 지원 확장을 설치하면 됩니다.
