어도비가 텍스트 에디터인 브라켓(Brackets)을 내놓더니 마이크로소프트(Microsoft)에서도 텍스트 에디터를 출시했습니다. 어도비는 기본적으로 IDE 급에 해당하는 WYSWIG 편집기인 드림위버(Dreamweaver)를 갖고 있는데 반해 MS는 기본적인 편집기가 메모장 또는 노트패트 정도 밖에 없었습니다. 하지만 전문적인 편집기에 해당하는 비주얼 스튜디오가 있습니다. 이들 두 가지 프로그램은 무겁고 유료이며 러닝커브(Learning Curve: 프로그램을 사용하기 위해 배우는데 걸리는 시간)가 상당합니다. 코드를 작성하기 위해 해당 프로그램을 사용하는 방법을 배워야 하죠. 하지만 텍스트 편집기는 기본적인 사용법만 알아도 바로 코드를 작성할 수 있습니다. 이들 거대 회사들이 텍스트 편집기의 중요성을 알게 된 것 같습니다.
https://code.visualstudio.com/
공식 명칭이 비주얼 스튜디오 코드(Visual Studio Code)로 비주얼 스튜디오 패밀리입니다. 줄여서 VSCode라고도 합니다. 위 링크로 이동하면 자신의 OS에 해당하는 프로그램을 내려받을 수 있습니다. 즉 윈도우, 리눅스, 매킨토시 버전이 있습니다. MS가 프로그램을 크로스 플랫폼으로 내놓은 것은 이번이 처음이라고 합니다. 사실 하나의 OS에만 사용할 수 있는 프로그램은 호응을 얻기 어렵죠. 개발자들은 유닉스 기반의 리눅스나 맥을 더 많이 사용하기 때문입니다. 그만큼 MS가 리눅스나 맥 사용자를 인식하고 있는 것 같습니다.
하지만 완전하게 자체적인 기술로 개발한 것이 아니라 깃허브에서 개발한 편집기인 아톰(Atom)을 기반으로 했습니다. 아톰은 또한 서브라임 텍스트를 모방했습니다. 개발자나 디자이너들이 서브라임 텍스트를 선호하다보니 이들 사용자를 끌어들이기 위한 것으로 생각됩니다. 이들 편집기는 서브라임 텍스트의 강력한 기능을 따라오지는 못합니다. 가볍다는 장점은 있습니다.
설치 후에는 명령 프롬프트(콘솔)에서 code 명령어로 파일이나 폴더를 바로 열 수 있습니다.
폴더에서 code . 을 사용하면 해당 폴더를 열 수도 있습니다.
인터페이스를 보면 서브라임의 구조와 비슷합니다. 다만 사이드바 좌측에 아이콘 메뉴가 몇 개 있습니다. 어도비의 브라켓은 아이콘 메뉴가 편집기 우측에 있죠. 처음 프로그램을 실행하면 웰컴 화면이 우측에 나타납니다. 이 파일은 마크다운으로 만들어졌는데 웹브라우저에서 보이는 대로 편집기에서 바로 볼 수 있습니다. 즉 md 확장자의 파일은 편집기에서 미리보기가 가능한 것입니다. 사이드바를 열려면 단축키로 Ctrl+B를 누르면 됩니다. 서브라임과 아톰의 경우 Ctrl+K, Ctrl+B를 두번 눌러야 하죠.
편집기의 가장 필요한 기능 중 하나인 탭 기능이 VCCode에는 없습니다. 파일을 원클릭해서 열고 다른 파일을 원클릭하면 기존에 열린 파일은 닫힙니다. 하지만 더블 클릭해서 열면 사이드바의 Explorer 패널에서 상단의 Working Files 아래에 나타나며 다른 파일을 열더라도 이 목록에 그대로 있습니다. 따라서 탭 기능 대신에 사용할 수 있습니다. 우측 하단의 스마일 아이콘은 사용후 피드백을 보낼 수 있습니다.
아직 초기 버전(0.1.0)이라 테마는 3가지만 있습니다.
빠른 명령어 실행을 위한 커맨드 파레트 기능은 아톰과 서브라임을 그대로 따라 했습니다. 단축키로 Ctrl+P를 눌러도 됩니다.
단축키로 Ctrl + =을 누르면(반대는 Ctrl + -) 편집기의 모든 요소가 커집니다. 다른 편집기는 편집 화면 내부의 코드만 커집니다. 이점은 아주 좋은 기능입니다. 아이콘 메뉴 중 첫 번째 아이콘은 사이드바를 토글할 수 있고 두 번째 아이콘은 검색(Ctrl+F, Ctrl+F3) 기능입니다. 정규표현식으로 검색도 가능하고 생략 아이콘을 클릭하면 파일에서 검색, 폴더에서 검색, 폴더 제외(Ctrl+Shift+F)도 할 수 있습니다.
비주얼 스튜디오 코드의 가장 큰 특징은 깃(Git)을 사용해 버전 콘트롤을 할 수 있고 네 번째 아이콘은 디버깅이 가능합니다. 작은 규모의 편집기임에도 이런 기능이 있습니다.
에밋(Emmet: Zend coding) 기능이 기본적으로 내장돼있어서 코드 작성이 빠릅니다. HTML 파일의 경우 doc를 입력하고 탭 키를 누르면 기본 HTML 코드가 작성됩니다. 태그 이름을 입력하고 탭 키를 누르면 태그가 완성되고 콘텐츠를 입력하면 됩니다. 각진 괄호를 입력하면 자동 완성을 위해 태그 목록이 나타납니다. 이러한 기능을 인텔리센스(IntelliSense)라고 합니다.
문서 우측 상단의 T 아이콘을 클릭하면 현재 문서가 복사돼 다른 컬럼에 나타나며 3개까지 만들 수 있습니다. md 파일인 경우 돋보기 아이콘을 클릭하면 미리보기가 가능합니다. 스크롤바에는 현재 커서가 위치한 곳이 표시됩니다.
File - Preferences 메뉴에서 환경설정을 할 수 있으며 이점은 서브라임과 아톰과 같은 방식입니다. 제가 처음 서브라임을 사용했을 때 뭐 이런 설정이 다있나 싶었는데 모두들 따라하는군요. 이밖에 여러 가지 기능이 있으며 아래의 사이트에 문서를 참고하세요.
https://code.visualstudio.com/Docs/
앞으로 업데이트 되면 더 좋은 기능이 추가될 것으로 생각됩니다.
