轉自:http://blog.csdn.net/liyijun4114/article/details/51658087
參考來源:
官方介紹:
https://code.visualstudio.com/Docs/runtimes/nodejs#_intellisense-and-typingsgyzhao寫的”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