비주얼 스튜디오 코드(Visual Studio Code)란?
비주얼 스튜디오 코드(Visual Studio Code)란?
- 공식 웹 사이트: Visual Studio Code - Code Editing. Redefined
- 깃허브GitHub 저장소: microsoft/vscode: Visual Studio Code
비주얼 스튜디오 코드Visual Studio Code는 마이크로소프트Microsoft에서 오픈소스로 개발하고 있는 소스 코드 에디터입니다. 웹 기반으로 기술들로 데스크톱 애플리케이션을 만들 수 있는 깃허브GitHub의 일렉트론Electron을 기반으로 만들어져 맥OSmacOS, 리눅스Linux, 윈도우Windows 등 메이저 운영체제를 모두 지원하고 있습니다. 마이크로소프트의 통합 개발 환경(IDE) 비주얼 스튜디오Visual Studio와 이름이 비슷하지만 따로 개발되고 있으며 IDE보다는 코드 에디터에 가깝습니다. MIT 라이센스로 오픈소스로 공개되어 있으며, 무료로 사용할 수 있습니다.
2015년 4월 29일 마이크로소프트 빌드에서 처음 발표되었습니다. 2015년 5월에 퍼블릭 프리뷰를 시작했고, 2015년 11월 MIT 라이센스로 깃허브GitHub에 공개되었으며, 2016년 4월 1.0 버전을 공개했습니다. 1.0이 공개되는 시점에 이미 2백만 다운로드를 넘었으며, 100개 이상의 언어 지원, 1,000개 이상의 확장이 존재했습니다. 2018년 스택오버플로우StackOverflow 개발자 설문조사에서는 선호하는 개발 도구 부문에서 34.9%(중복 선택)의 선택을 받으며 1위를 차지했습니다. 2019년에는 차이가 더 벌어져 50.7%로 압도적인 차이로 1위를 차지했습니다. IDE/에디터 분야에서는 젯브레인JetBrain의 IDE들과 깃허브의 아톰Atom 이후에 새롭게 트랜드를 주도하고 있습니다.
깃허브에서 2020년 1월 현재 9만개의 스타를 기록하고 있으며, 이는 전체 저장소 중에 15위에 해당합니다. 문서 저장소를 제외하면 vuejs/vue, facebook/react, tensorflow/tensorflow, twbs/bootstrap에 이어 5위입니다. 비주얼 스튜디오 코드는 마이크로소프트에서 주도적으로 개발하고 있는 타입스크립트TypeScript 언어로 만들어져 있으며 1,000명 이상의 개발자가 기여하였습니다. 연 단위의 로드맵과 월 단위의 이터레이션 계획을 공개하고 있습니다. 코드 에디터는 모나코라는 프로젝트로 별도로 개발되고 있습니다. 2019년 11월에는 마이크로소프트 애저에서 VS 코드 기반의 클라우드 개발 환경 비주얼 스튜디오 온라인 퍼블릭 프리뷰를 발표했습나다.
다음과 같은 주요한 특징을 가지고 있습니다.
- 맥OS, 리눅스, 윈도우 등 메이저 운영체제들을 지원
- 인텔리센스: 코드 자동 완성, 변수 타입, 함수 정의, 모듈 임포트 등
- 디버깅, 리팩토링, 빌트인 깃Git, Diff 뷰어, 스니펫 등 기본 포함
- 다양한 확장을 지원하며, 이를 통해 100개 이상의 언어 지원
- 웹 기반 기술로 만들어져있으며, 타입스크립트로 확장 개발 가능
- 마켓플레이스에 15,000개 이상의 확장이 공개되어있음. 대부분 무료
- 모든 기능에 대한 키 바인딩(단축키)을 자유롭게 변경 가능
- 커맨드 팔레트(Command + Shift + P)로 사용 가능한 기능을 증분검색으로 검색 및 실행 가능
모나코 에디터(Monaco Editor)
모나코 에디터는 비주얼 스튜디오 코드에서 사용하고 있는 코드 에디터이며, 본체와는 별도로 개발되고 있습니다. 마이크로소프트의 주도로 자바스크립트JavaScript로 개발되고 있으며, MIT 라이센스로 공개되어있습니다. VS 코드와는 분리되어있기 때문에 웹브라우저에서 에디터만 로드해서 독립적으로 사용하는 것도 가능합니다. 현재 IE 11, 엣지Edge, 크롬Chrome, 파이어폭스Firefox, 사파리Safari, 오페라Opera를 지원하고 있습니다. 모바일 브라우저는 지원하고 있지 않습니다. 모나코 에디터에 대한 공식 가이드는 비주얼 스튜디오 공식 문서에 포함되어 있습니다.
비주얼 스튜디오 코드 설치하고 시작하기
비주얼 스튜디오 코드는 다운로드 페이지에서 운영체제 별로 빌드된 패키지를 바로 다운로드 받아 설치할 수 있습니다.
맥OSmacOS에서 홈브류 캐스크를 사용해 커맨드라인에서 설치할 수 있습니다.
$ brew update
$ brew cask install visual-studio-code윈도우에서는 Chocolatery로 커맨드라인에서 설치할 수 있습니다.
choco install vscode비주얼 스튜디오를 처음 시작한다면 공식 문서를 참고해주세요.
커맨드라인 지원
커맨드라인에서 비주얼 스튜디오 코드를 실행하는 것도 가능합니다. 애플리케이션을 설치하면 code 명령어를 사용할 수 있습니다.
$ code --help
Visual Studio Code 1.34.0
...단순히 비주얼 스튜디오 코드를 실행하는 경우 code를 실행하면 됩니다. 디렉터리나 파일을 지정하는 경우 code 명령어 뒤에 경로를 지정합니다. 새 창에 띄우는 경우 -n, 기존 창에 여는 경우 -r 옵션을 사용합니다.
커맨드라인 명령어에 대한 더 자세한 정보는 공식 문서를 참고해주세요.
언어 지원
현재 영어 이외에도 한국어, 중국어, 일본어, 스페인어, 러시아어, 독일어, 프랑스어, 포르투갈어, 이탈리아어, 터키어 등의 언어 확장을 공식적으로 지원하고 있습니다.
프로그래밍 언어 지원
비주얼 스튜디오 코드에서는 확장을 통해 100개 이상의 언어를 지원하고 있습니다. 마이크로소프트에서 공식적으로 파이썬Python, C/C++, C#, 도커Docker, 고Go, 파워셸PowerShell 등을 지원하고 있습니다. VS 코드가 지원하는 프로그래밍 언어와 기능에 대해서는 공식 문서를 통해서도 확인할 수 있습니다.
공식 지원은 아니지만, 이외에도 자바Java, PHP, 루비Ruby, 다트Dart, YAML, HCL 등 다양한 언어 지원이 개발되고 있습니다. 모든 프로그래밍 언어 지원 확장은 마켓 플레이스 프로그래밍 언어 카테고리에서 확인할 수 있습니다.
다음 영상에서는 VS 코드에서 고 언어 개발 환경을 셋업하는 방법을 소개합니다.
확장(Extensions)
프로그래밍 언어 확장 이외에도 VS 코드에 기능을 추가하는 다양한 확장들이 개발되고 있습니다. 모든 확장 목록은 마켓플레이스에서 확인할 수 있습니다.
VS 코드의 확장은 애플리케이션 안에서도 바로 검색하고 설치하는 것이 가능합니다.
프로그래밍 언어 이외에 인기 있는 가장 인기있는 확장들입니다.
- Prettier: 코드 포매터 프리티어Prettier와 VS 코드를 통합하는 확장
- Debugger for Chrome: 자바스크립트 코드를 크롬Chrome 브라우저에서 바로 디버깅할 수 있는 확장
- vscode-icons: VS 내부의 파일 탐색기에 확장자 별로 나타나는 아이콘을 추가하는 확장
- Beautify: 자바스크립트 뷰티파이어JavaScript Beautifier와 VS 코드를 통합하는 확장
- GitLens: VS 코드의 깃Git 지원을 강화
- Live Server: VS 코드에서 웹 개발시에 변경사항을 바로 반영해주는 라이브 리로드 서버 지원 확장
- Code Runner: 바로 에디터 상의 코드를 실행할 수 있게 도와주는 확장
- HTML Snippets: HTML 스니펫을 모아놓은 확장
- Bracket Pair Colorizer: 매칭되는 괄호들을 구분하기 쉽도록 적절한 색을 입혀주는 확장
- Git History: 깃 히스토리를 보여주고 검색할 수 있게 해주는 확장
이 외에 에디터 상에 캐릭터를 표시하는 live2d와 같은 확장도 있습니다.
테마
개발자 코드 에디터에서 중요하게 생각하는 기능 중 하나가 바로 테마 기능입니다. VS 코드에서는 확장으로 테마를 설치할 수 있습니다. Solarized Dark, Dracula, Material, Cobalt2 등 많이 선호 되는 테마 뿐만 아니라 커스터마이징도 가능합니다. 설치 가능한 테마는 마켓플레이스의 테마 카테고리에서 확인할 수 있습니다.
원격 개발 지원
비주얼 스튜디오 코드 원격 개발 확장
비주얼 스튜디오 코드(Visual Studio Code), 원격 개발 기능 지원
비주얼 스튜디오에서는 지난 2019년 5월 2일에 원격 코드 개발 기능을 지원을 발표했습니다. 원격 개발Remote Development 확장을 설치하면 사용할 수 있으며, SSH, 컨테이너, WSL 등을 기반으로 원격 머신의 코드를 로컬 환경에서 직접 수정할 수 있습니다. 원격 개발 뿐만 아니로 로컬에서 도커와 같은 컨테이너로 개발 환경을 구축할 경우 여러가지 불편함이 있었는데, 이 기능을 사용하면 로컬 개발 환경과 거의 같은 경험을 구현할 수 있습니다.
비주얼 스튜디오 온라인(Visual Studio Online)
원격 개발 확장 공개와 함께 마이크로소프트에서는 비주얼 스튜디오 코드 온라인을 예고했습니다. 비주얼 스튜디오 온라인 이전에도 코드 서버code-server 프로젝트를 사용해 특정 서버에 VS 코드를 서버로 실행하고 웹 브라우저에서 접속해 VS 코드를 사용하는 것이 가능했습니다. 이는 VS 코드가 웹 기술로 만들어진 프로젝트이기 때문에 가능한 접근이었습니다.
2019년 11월 4일 마이크로소프트에서는 공식적으로 비주얼 스튜디오 온라인의 퍼블릭 프리뷰를 진행한다고 발표하였습니다. 비주얼 스튜디오 온라인은 VS 코드의 클라우드 IDE 버전이라고 할 수 있습니다. 이 기능을 사용하기 위해서는 먼저 마이크로소프트 애저Microsoft Azure에 계정 등록을 해야합니다. 현재는 미국 동부East US, 동남아시아Southeast Asia, 서유럽West Europe, 미국 서부 2West US 2 리전에서 사용할 수 있으며, 인스턴스 타입은 표준(4개 코어, 8GB RAM)과 프리미엄(8개 코어, 16GB RAM) 두 가지 타입이 지원됩니다. 원격에 개발 환경을 구성하면 로컬의 비주얼 스튜디오 코드(클라이언트)나 웹 브라우저를 사용해 원격의 비주얼 스튜디오 코드(서버)에 접속해 프로그래밍을 할 수 있습니다. 인스턴스는 (기본 설정에 따르면) 30분 동안 사용하지 않으면 비활성화 됩니다. 활성화 되어있는 경우와 대기 시간의 경우 요금이 다르게 적용됩니다. 비용에 대한 정확한 정보는 VS 온라인 공식 웹사이트의 가격 정보를 참고해주시기 바랍니다.
비주얼 스튜디오 온라인은 원격 서버를 셀프 호스트로 운영하는 방식도 지원하고 있습니다. 이 경우에도 애저 계정이 필요하지만, 별도의 요금은 발생하지 않습니다.