• VSCode 자동 완성 [typings] :: 마이구미
    개발툴 2017. 5. 11. 23:23
    반응형

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

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


    intellisense


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

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


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

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


    intellisense


    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 모듈을 볼 수 있다.


    typings.json


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

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


    jsconfig.json


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

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


    intellisense


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


    globalDependencies


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


    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/

    반응형

    댓글 1

    • 뉴비 2020.07.15 17:17

      lodash 설치중에 이런 에러가납니다

      typings ERR! message Attempted to compile "lodash" as a global module, but it looks like an external module. You'll need to remove the global option to continue.
      typings ERR!
      typings ERR! cwd /home/bgyoo/workspace/chef-robot-aruco/visual_grasping_gui
      typings ERR! system Linux 5.3.0-61-generic
      typings ERR! command "/usr/bin/node" "/home/bgyoo/.npm-global/bin/typings" "install" "lodash" "--save" "--global"
      typings ERR! node -v v12.18.2
      typings ERR! typings -v 2.1.1
      typings ERR!
      typings ERR! If you need help, you may report this error at:
      typings ERR! <https://github.com/typings/typings/issues>

Designed by Tistory.