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有帶自動補全的功能, 如圖所示
js原生api自動補全

但是如果使用node.js或者其require進去的相關函數就比較可憐了。
沒有補全的process進程

除了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右下角會彈出一個綠色的小燈泡,如圖所示:
配置jsconfig.json
點擊進去,頂部會提示
“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”
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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM