1. 程式人生 > >Visual Studio Code 使用 Typings 實現智慧提示功能

Visual Studio Code 使用 Typings 實現智慧提示功能

前言

我們知道在IDE中程式碼的智慧提示幾乎都是標配,雖然一些文字編輯器也有一些簡單的提示,但這是通過程式碼片段提供的。功能上遠不能和IDE相比。不過最近興起的文字編輯器的新銳 Visual Studio Code 可以通過 Typings 來對 JavaScript 實現智慧提示功能,對於一個文字編輯器來說,這點很難得。所以Visual Studio Code 特別適合用來編寫 JavaScript(Node.js)程式; 同時,如果我們需要編寫一些嘗試性的小程式碼片段,例如:Lodash.js 某個函式的小Demo,因為我們不想研究一個函式的使用方式而去使用IDE新建一個專案,這時候Visual Studio Code 就是一個非常好的選擇,而且它同樣可以執行和除錯 JavaScript

 程式碼(依賴於 Node.js),並且還包含非常方便的程式碼提示功能。

從這點來說,我覺得Visual Studio Code 已經算得上是一個精悍的小型IDE了。

通過NPM安裝Typings

通過 NPM 我們可以很容易的安裝 Typings ,在命令列中輸入:

npm install -g typings

安裝完成後,在命令列中輸入:

typings --version

看到版本資訊就表示 typings 工具安裝完成了:

NPM是和Node.js一起安裝的,如果你想使用NPM的話,那麼你應該先安裝Node.js

安裝相關提示資訊檔案

安裝完成後,我們需要安裝相應的需要提示功能庫或者框架的型別資訊檔案,在這裡我們新建一個資料夾 NodeSnippet

,使用命令列進入到該目錄中,分別輸入下面兩個命令來安裝NodeLodash的型別介面資訊檔案:

typings install dt~node --global --save
typings install lodash --save

什麼時候需要使用 --global 引數:

  • 如果安裝的包使用script標記來引用(如jQuery)(也就是在瀏覽器中使用)
  • 這個包是屬於環境的一部分(如node)時
  • 該包沒有使用 --global 安裝失敗時

這時候我們可以看到我們的 NodeSnippet目錄中多了一些檔案:

這些檔案就是為我們提供提示資訊的型別型別檔案(使用TypeScript

定義)。檢視Typings是否支援某個庫或框架的智慧提示,我們可以使用下面的命令:

typings search exampleName

啟用智慧提示功能

通過兩種方式來啟動提示功能:

  • 第一種是在需要進行只能提示的檔案最上行增加提示資訊檔案所在目錄,格式如下:
/// <reference path="./typings/index.d.ts"/>
  • 第二種是在專案所在目錄(在這裡是NodeSnippet資料夾中)增加一個名為jsconfig.json的空檔案。

啟用提示功能後我們就可以非常愉快的使用Visual Studio Code 為我們提供的智慧提示功能了。如下所示:

注意事項

Typings VS TSD

Typings是作為TSD的替代者而出現的,如果你已經安裝了TSD,那麼需要知道現在TSD已經不推薦使用了。如果已經安裝TSD請執行下面的命令來移除它:

 npm rm -g tsd

使用 CNPM

在國內由於的原因,有時候使用NPM安裝模組的速度上會很慢,這時候我們其實可以選擇國內淘寶的NPM映象,使用下面的命令來進行安裝:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完成後使用cnpm來代替npm命令即可,例如下面安裝一個lodash模組的示例:

cnpm install lodash 

可以看到除了cnpm替代了npm其他的並沒有任何區別。

參考&進一步閱讀