Visual Studio Code – Node.js 개발

  • Article

Node.js와 어울리는 많은 에디터들이 있지만 … 무료, 멀티플랫폼(Mac, Linux, Windows), 마이크로소프트가 만든 Visual Studio Code를 사용하지 않을 이유는 없다. 물론 Visual Studio 수준의 IDE를 생각하면 안된다. 에티터와 IDE 사이에서 좀 더 에디터에 가까운 툴이니까!

Node.js 개발에 도움을 받을 수 있는 Visual Studio Code (이하 VSC)의 3가지 기능을 집고 가보자.

1. 내장 터미널 (Integrated Terminal)

node_vsc_01 9.47.22 PM

단축키는 ctrl + ` (키보드 왼쪽위에 있는 어퍼스트로피)를 누르면 내장 터미널이 나타난다. 별도 터미널을 써도 되지만 npm 설치나 node app.js 등의 명령을 VSC를 벗어나지 않고 내릴 수 있다.

2. Debug + Break Point

VSC에서 Break Point를 걸어서 디버깅을 할 수 있다. 특히 10년도 넘게 Visual Studio를 사용해온 사람이라면 Break Point를 찍고 싶을 것이다. 그러려면 먼저 프로젝트 폴더에 launch.json이 필요하다. 위 그림에서 왼쪽 세로 탭에 벌레금지 아이콘을 누르고 위쪽 설정 아이콘에 빨간 점이 보일 것이다. 클릭을 하고 Select Environment에서 Node.js를 선택하면 launch.json가 .vscode 폴더 밑에 생긴다. 디버그 할 때 실행 환경의 정의하는 파일이다.

이제 F5로 실행하고 F9로 BreakPoint를 찍고 디버깅을 할 수 있다.

node_vsc_03

3. 인텔리센스(Intellisense)

아래 3단계가 필요하다.

1) js파일을 열면 오른쪽 제일 아래 전구 아이콘이 보일 것이다. (첫번째 이미지 참조, 스마일 아이콘 옆) 이걸 누르면 jsconfig.json 파일을 만들 수 있는데 여기서 인텔리센스에 필요없는 폴더를 제외 시켜준다.

아니면 프로젝트 폴더에 jsconfig.json 파일을 만들어주고 아래와 같은 코드를 넣는다.

 {
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules",
        "bower_components",
        "jspm_packages",
        "tmp",
        "temp"
    ]
}

2) npm으로 typings라는 모듈을 설치한다. -g 옵션으로 글로벌로 설치한다. VSC에서 javascript의 Intellisense는 type script의 도움을 받는다. 그 타입 스크립트를 만들어주는 툴이다.

 $ sudo npm install -g typings

3) 내가 사용하는 모듈에 대해서 아래 명령을 터미널에서 실행한다. 알고있는 모듈이름에 dt~를 붙여서 글로벌로 설치한다. typings 폴더가 생기고 확장자가 ts인 타입스크립트 파일이 생긴다. 이제 Intellisense를 사용할 수 있다. 코딩하다가 단축키 Ctrl + space를 누르면 도움을 받을 수 있다.

 $ typings install dt~node --global --save
$ typings install dt~express --global --save

node_vsc_04