빌드 2015 컨퍼런스에서 발표된 비주얼 스튜디오 코드(Visual Studio Code)는 크로스 플랫폼을 지향하는 텍스트 중심의 개발도구입니다. 마이크로소프트가 적극적으로 다른 플랫폼에 대해서 공략을 시작했다는 평을 받으며 많은 사람들이 환호하고 있는 툴이기도 합니다. 맥에서 강력한 인텔리센스(Intellisense) 기능을 이용할 수 있어서 화제입니다만 맥에서 인텔리센스를 구동시키는게 생각보다 쉽지 않더군요 (저만 그런 것일수도...)
여기저기 찾아보고 시행착오를 겪은 끝에 인텔리센스를 활용할 수 있는 방법을 찾아냈고 (사실 원래 있었지만 저만 못찾아냈던...) 같은 시행착오를 겪는 분이 계실것 같아서 간단하게 설치 순서와 필요한 패키지들을 정리해 봤습니다. 비주얼 스튜디오 코드 공식 웹사이트에 잘 설명되어 있는 부분입니다만 영어의 압박으로 꼼꼼히 읽지 않으면 놓치기 쉬운 부분들이 많더군요. 잘 안되시는 분들은 아래의 순서를 따라해 보시기 바랍니다.
- "비주얼 스튜디오 코드" 맥 버전을 설치합니다
- 설치라고 되어 있긴 합니다만 공식 사이트에서 배포하는 zip 파일을 받는게 전부입니다.
- 비주얼 스튜디오 코드 다운로드 : https://code.visualstudio.com/
- 압축을 풀면 나오는 비주얼 스튜디오 코드 실행파일을 어플리케이션 폴더로 끌어놓아 런치패드를 통해 실행 가능하게 만들면 좋겠죠
- 혹시나 터미널을 자주 쓴다면 .bashrc 파일이나 .bash_profile 에 아래의 스크립트를 넣으면 편리합니다
code () { if [[ $# = 0 ]] then open -a "Visual Studio Code" else [[ $1 = /* ]] && F="$1" || F="$PWD/${1#./}" open -a "Visual Studio Code" --args "$F" fi }- 인텔리센스를 위해 TypeScript Definition Manager 를 설치합니다
- 비주얼 스튜디오 코드는 TypeScript 가 사용하는 *.d.ts 파일을 이용하여 인텔리센스를 제공합니다
- 이미 만들어진 *.d.ts 파일을 이용하기 위하여 TypeScript Definition Manager 를 설치해야 합니다
- TSD 설치 안내 페이지 : http://definitelytyped.org/tsd/
- TSD 설치를 하기 위해서는 node 가 먼저 설치되어 있어야 합니다 (npm을 이용...)
$ npm install tsd -g
- TSD를 이용하여 필요한 언어/모듈/패키지를 검색하여 설치합니다
- TSD 의 Query 명령어를 이용하여 필요한 패키지를 조회합니다 (node.js 에 대한 조회)
$ tsd query node >> tsd 0.5.7 VersionMatcher.filter; gt; 0.11.0; 0.10.0 - node/node.d.ts : <head> : 2015-05-07 05:06
- 조회한 패키지의 이름을 이용하여 설치 명령을 내립니다 (--action install 을 추가)
$ tsd query node --action install >> tsd 0.5.7 VersionMatcher.filter; gt; 0.11.0; 0.10.0 - node/node.d.ts : <head> : 2015-05-07 05:06 >> running install.. >> written 1 file: - node/node.d.ts
- 설치가 잘 되었는지 확인해 봅니다
- 사용자 루트 경로에서 "typing" 이라는 폴더가 생성되었는지 확인합니다
- 해당 폴더 안에 "node" 라는 폴더가 있는지 보고, 그 안에 "node.d.ts" 파일이 존재하는지 확인합니다
- Node Express Generator (참고 : https://code.visualstudio.com/Docs/nodejs) 로 만든 스캐폴딩 프로젝트의 app.js 를 엽니다
- 14 라인의 __dirname 이라는 node 시스템 변수가 인식되지 않고 있습니다만... "커맨드+점(.)"을 눌러 Reference 를 추가해 줍니다
- 코드 상단에 Reference 태그가 추가됩니다
- 이후 테스를 위해 http 모듈을 추가하고 인텔리센스가 동작하는지 봅니다. 잘 되는군요.
좀 돌아왔습니다만 이제 TSD 파일만 잘 설치하면 왠만한 코드는 정말 간편하게 만들 수 있을 것 같습니다. 비주얼 스튜디오 코드로 맥에서도 훌륭한 인텔리센스와 가벼운 에디터를 사용해 보시기 바랍니다!
2015/04/28 - 마이크로소프트 개발자 컨퍼런스 빌드 2015 세션 일정
2015/04/14 - 고스트 인스펙터(Ghost Inspector)로 UI 테스트를 자동화 해보자
2015/03/31 - 리엑트 네이티브(React Native)를 이용한 iOS 개발 환경 준비하기
2015/03/23 - 리퀘스트 맵 제너레이터, 웹 사이트 성능 저하의 주범을 찾자!
