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

轉載地址 blog.csdn.net/liyijun4114… //轉載只爲我的記錄

今天正巧在看vscode官方文檔的時候，看到了介紹其使用typings拓展自動補全功能的介紹，同時查了一點其餘資料，感受用起來很是方便。因爲腦子老是會清空一些不經常使用的東西，所以記在這裏方便之後參考。

參考來源：

**官方介紹： ** code.visualstudio.com/Docs/runtim…

**gyzhao寫的」Visual Studio Code 使用 Typings 實現智能提示功能」： ** www.cnblogs.com/IPrograming…

vscode的自動補全 vscode本來是隻有es原生api有帶自動補全的功能

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

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

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

官方描述以及使用說明 www.npmjs.com/package/typ…

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