Visual Studio Code使用typings拓展自動補全功能

轉自：http://blog.csdn.net/liyijun4114/article/details/51658087

參考來源：

官方介紹：
https://code.visualstudio.com/Docs/runtimes/nodejs#_intellisense-and-typings

gyzhao寫的」Visual Studio Code 使用 Typings 實現智能提示功能」：
http://www.cnblogs.com/IPrograming/p/VsCodeTypings.html

vscode的自動補全

vscode本來是隻有es原生api有帶自動補全的功能， 如圖所示

可是若是使用node.js或者其require進去的相關函數就比較可憐了。

除了process模塊，path、fs、__dirname等也一樣沒有自動補全。彷佛在低版本下使用__dirname還會提示語法錯誤。

使用Typings添加自動補全

typings官方描述是一個TypeScript的定義管理器，集成管理了經常使用函數的語法規則。不知道跟微軟有沒有關係，不過這點卻是真的挺方便的。

官方描述以及使用說明
https://www.npmjs.com/package/typings

vscode能夠識別typings，所以能夠經過typings來做爲插件拓展vscode的功能。具體使用方法以下：

-配置jsconfig.json

在使用typings以前，須要在vscode裏面配置一下名爲jsconfig.json的文件。配置方法很簡單，隨便選中一個js文件，vscode右下角會彈出一個綠色的小燈泡，如圖所示：

點擊進去，頂部會提示
「Create a jsconfig.json to enable richer IntelliSense and code navigation across the entire workspace.」
選擇create，vscode就會創造一個jsconfig.json的文件，內容大體以下：

{
    // See https://go.microsoft.com/fwlink/?LinkId=759670
    // for the documentation about the jsconfig.json format
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules",
        "bower_components",
        "jspm_packages",
        "tmp",
        "temp"
    ]
}

全部須要的參數都會幫咱們設置好。此時我使用的是vscode v1.2.0生成的jsconfig，低版本自動生成的配置可能會比裏面的少一點，但不影響。

-安裝typings

使用npm全局安裝typings

npm install -g typings

-安裝語法插件

以安裝node.js自動補全爲例，在項目根目錄下使用bash或者cmd，輸入

typings install dt~node --global

其中」dt~」爲使用DefinitelyTyped類型定義的意思，vscode能夠識別這種定義。
以後能夠看到在項目目錄下出來了新的文件夾「typings」

如今輸入process，自動地補全出來了~window下可能須要重啓下vscode才能看到自動補全的效果。

-express、lodash等的自動補全

相似地，可使用以上的方法，實現其餘模塊的自動補全。

typings install dt~express --global
typings install dt~lodash --global

 

//vscode官方文檔上express的typings使用的是
typings install dt~express dt~serve-static dt~express-serve-static-core --global

 

關於typings的其餘相關.

-基本用法

語法複製自typings的Quick Start，我的對註釋本地化了一下。

# 安裝Typings的命令行代碼. 
npm install typings --global

# 搜索對應模塊的typings定義. 
typings search tape

# 根據名稱尋找一個可得到的typings定義. 
typings search --name react

# 若是你用一個獨立包的模塊: 
# 或者並非安裝全局模塊
# 好比並非在命令行經過輸入npm install -g typings這種方式安裝的. 
typings install debug --save

# 若是是經過script標記
# 或者是子環境的一部分
# 或者全局typings命令不可用的時候： 
typings install dt~mocha --global --save

# 從其餘版本處安裝typings定義(好比env或者npm). 
typings install env~atom --global --save
typings install npm~bluebird --save

# 使用該文件`typings/index.d.ts` (在`tsconfig.json`文件使用或者用 `///` 定義). 
cat typings/index.d.ts