VSCode 자동 완성 [typings] :: 마이구미

이번 글은 VS code의 intellisense 기능. 즉, 자동 완성 기능에 대해 다뤄본다.

대부분의 개발도구에서 언어와 무관하게 기본적으로 제공하는 편리한 기능이다.

VS code 에서는 다른 라이브러리의 기능들을 자동 완성 기능을 추가할 수 있다.

예를 들어, jquery, lodash 와 같은 라이브러리 또한 자동 완성 기능이 있다면 편리할 것이다.

대부분의 툴에서는 기본적인 자동 완성 기능을 가지고 있다.

하지만 jquery, lodash 같은 라이브러리를 위한 자동 완성 기능은 가지고 있지 않다.

lodash의 자동 완성 기능을 적용해보자.

우선 npm을 통해 typings 를 설치해야한다.

typings 는 TypeScript의 정의 관리 도구라고 보면 된다.

The TypeScript Definition Manager.

$ npm install typings --global

설치 후, 해당 프로젝트 디렉토리에 다음 명령어를 친다.

$ typings init

명령어가 실행되면 typings.json 파일이 생성된다.

typings.json 을 통해 의존성을 관리할 수 있게 된다.

이제 typings를 통해 lodash 설치한다.

$ typings install lodash --save --global

--save --global 옵션은 붙여주자.

설치하는 파일이 global 모듈일 수도 있기 때문이다.

 global 모듈의 예로는 jquery를 들 수 있다. (글 하단에 다시 언급)

설치 명령어를 통해 생성된 typings 디렉토리에 lodash 모듈을 볼 수 있다.

VS code 버전이 1.8 이상이라면 package.json 보다는 jsconfig.json 에 선언한다.

공식 문서를 참고하자 (https://code.visualstudio.com/docs/languages/javascript#_automatic-type-acquisition)

jsconfig.json 파일을 통해 명시적으로 type들을 나열하여 선언된 파일들을 얻을 수 있다.

확인해보면 lodash의 자동 완성 기능이 추가된 것을 볼 수 있다.

global 모듈인 jquery의 경우에는 아래와 같이 표현된다.

global 모듈로써, import 또는 require 할 필요없이 jquery를 사용할 수 있고, 자동 완성 기능 또한 추가되었다.

최근에는 DefinitelyTyped을 더 많이 쓴다고 한다.

또한 typings 보다 훨씬 쉽고 효율적인 것 같다.

잘못된 내용이 있다면 댓글을 통해 알려주면 감사하겠다.

VS Code 자동 완성 기능 - 공식 문서

https://code.visualstudio.com/docs/languages/javascript#_automatic-type-acquisition

VS Code Typings and Intellisense

http://shrekshao.github.io/2016/06/20/vscode-01/

typings - npm 문서

https://www.npmjs.com/package/typings

DefinitelyTyped

https://github.com/DefinitelyTyped/DefinitelyTyped

https://blog.kesuskim.com/2016/09/Typings%EC%9D%B4%EB%9E%80/