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

前言

相信大家都知道在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的空檔案。

更多jsconfig.json檔案的內容可以參考：https://code.visualstudio.com/docs/languages/javascript

啟用提示功能後我們就可以非常愉快的使用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

可以看到除了cn了npm其他的並沒有任何差別。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或工作能帶來一定的幫助，如果有疑問大家可以留言交流。

更多利用Typings為Visual Studio Code實現智慧提示功能相關文章請關注PHP中文網！

🎜