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 --globaltypings 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 --savetypings install npm~bluebird --save# 使用該檔案`typings/index.d.ts` (在`tsconfig.json`檔案使用或者用 `///` 定義). cat typings/index.d.ts

 

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