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
Node
和Lodash
的型別介面資訊檔案:
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
其他的並沒有任何區別。