利用Typings為Visual Studio Code實(shí)現(xiàn)智能提示功能
前言
相信大家都知道在IDE中代碼的智能提示幾乎都是標(biāo)配,雖然一些文本編輯器也有一些簡單的提示,但這是通過代碼片段提供的。功能上遠(yuǎn)不能和IDE相比。不過最近興起的文本編輯器的新銳 Visual Studio Code 可以通過 Typings 來對 JavaScript 實(shí)現(xiàn)智能提示功能,對于一個(gè)文本編輯器來說,這點(diǎn)很難得。所以Visual Studio Code 特別適合用來編寫 JavaScript(Node.js)程序; 同時(shí),如果我們需要編寫一些嘗試性的小代碼片段,例如:Lodash.js 某個(gè)函數(shù)的小Demo,因?yàn)槲覀儾幌胙芯恳粋€(gè)函數(shù)的使用方式而去使用IDE新建一個(gè)項(xiàng)目,這時(shí)候Visual Studio Code 就是一個(gè)非常好的選擇,而且它同樣可以運(yùn)行和調(diào)試 JavaScript 代碼(依賴于 Node.js),并且還包含非常方便的代碼提示功能。
從這點(diǎn)來說,我覺得Visual Studio Code 已經(jīng)算得上是一個(gè)精悍的小型IDE了。
通過NPM安裝Typings
通過 NPM 我們可以很容易的安裝 Typings ,在命令行中輸入:
npm install -g typings
安裝完成后,在命令行中輸入:
typings --version
看到版本信息就表示 typings 工具安裝完成了:

NPM是和Node.js一起安裝的,如果你想使用NPM的話,那么你應(yīng)該先安裝Node.js。
安裝相關(guān)提示信息文件
安裝完成后,我們需要安裝相應(yīng)的需要提示功能庫或者框架的類型信息文件,在這里我們新建一個(gè)文件夾 NodeSnippet,使用命令行進(jìn)入到該目錄中,分別輸入下面兩個(gè)命令來安裝Node和Lodash的類型接口信息文件:
typings install dt~node --global --save typings install lodash --save
什么時(shí)候需要使用 --global 參數(shù):
- 如果安裝的包使用script標(biāo)記來引用(如jQuery)(也就是在瀏覽器中使用)
- 這個(gè)包是屬于環(huán)境的一部分(如node)時(shí)
- 該包沒有使用
--global安裝失敗時(shí)
這時(shí)候我們可以看到我們的 NodeSnippet目錄中多了一些文件:

這些文件就是為我們提供提示信息的類型類型文件(使用TypeScript定義)。查看Typings是否支持某個(gè)庫或框架的智能提示,我們可以使用下面的命令:
typings search exampleName
啟用智能提示功能
通過兩種方式來啟動(dòng)提示功能:
第一種是在需要進(jìn)行只能提示的文件最上行增加提示信息文件所在目錄,格式如下:
/// <reference path="./typings/index.d.ts" />
第二種是在項(xiàng)目所在目錄(在這里是NodeSnippet文件夾中)增加一個(gè)名為jsconfig.json的空文件。
更多jsconfig.json文件的內(nèi)容可以參考:https://code.visualstudio.com/docs/languages/javascript
啟用提示功能后我們就可以非常愉快的使用Visual Studio Code 為我們提供的智能提示功能了。如下所示:

注意事項(xiàng)
Typings VS TSD
Typings是作為TSD的替代者而出現(xiàn)的,如果你已經(jīng)安裝了TSD,那么需要知道現(xiàn)在TSD已經(jīng)不推薦使用了。如果已經(jīng)安裝TSD請執(zhí)行下面的命令來移除它:
npm rm -g tsd
使用 CNPM
在國內(nèi)由于墻的原因,有時(shí)候使用NPM安裝模塊的速度上會(huì)很慢,這時(shí)候我們其實(shí)可以選擇國內(nèi)淘寶的NPM鏡像,使用下面的命令來進(jìn)行安裝:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成后使用cnpm來代替npm命令即可,例如下面安裝一個(gè)lodash模塊的示例:
cnpm install lodash
可以看到除了cnpm替代了npm其他的并沒有任何區(qū)別。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- Visual Studio和Visual Studio Code之間有什么區(qū)別
- Visual Studio Code (vscode) 配置 C / C++ 環(huán)境的流程
- 使用 Visual Studio Code(VSCode)搭建簡單的Python+Django開發(fā)環(huán)境的方法步驟
- Visual Studio Code配置C、C++環(huán)境并編寫運(yùn)行的方法
- 淺析Visual Studio Code斷點(diǎn)調(diào)試Vue
- Visual Studio Code 使用Git進(jìn)行版本控制(圖文教程)
- 詳解使用Visual Studio Code對Node.js進(jìn)行斷點(diǎn)調(diào)試
- 在Visual Studio Code中配置GO開發(fā)環(huán)境的詳細(xì)教程
- visual studio code 編譯運(yùn)行html css js文件的教程
相關(guān)文章
ASP.NET簡化編輯界面解決思路及實(shí)現(xiàn)代碼(2)
這篇與前一篇改進(jìn)部分,也許大家會(huì)留意到動(dòng)畫演示,主要是GridVeiw的更新與刪除會(huì)在每row都有。因此Insus.NET把它抽取出來,放在GridView外,感興趣的朋友可以了解下啊,希望本文對你有所幫助2013-01-01
ASPNET按鈕只執(zhí)行客戶端代碼不回送頁面實(shí)現(xiàn)思路
有些時(shí)候需要實(shí)現(xiàn)只執(zhí)行客戶端代碼不回送頁面,不過很多童鞋們不清楚如何實(shí)現(xiàn)呢,還好本文的出現(xiàn)將解決你的困擾,感興趣的朋友可以了解下,或許對你有所幫助2013-02-02
asp.net GridView中使用RadioButton單選按鈕的方法
這篇文章主要介紹了asp.net GridView中使用RadioButton單選按鈕的方法,結(jié)合實(shí)例形式總結(jié)分析了三種GridView中使用RadioButton單選按鈕的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
12306動(dòng)態(tài)驗(yàn)證碼啟發(fā)之ASP.NET實(shí)現(xiàn)動(dòng)態(tài)GIF驗(yàn)證碼(附源碼)
這篇文章主要介紹了受到12306動(dòng)態(tài)驗(yàn)證碼啟發(fā),實(shí)現(xiàn)ASP.NET動(dòng)態(tài)GIF驗(yàn)證碼,需要的朋友可以參考下2015-08-08
深入學(xué)習(xí).net驗(yàn)證碼生成及使用方法
這篇文章主要介紹了.net驗(yàn)證碼生成及使用方法,先了解驗(yàn)證碼是什么以及其作用,最后分享了如何制作驗(yàn)證碼,內(nèi)容很全面,感興趣的小伙伴們可以參考一下2015-11-11
.net 中按.(點(diǎn))無法智能提示的bug解決方案
IDE按.無法智能提示,但是可以編譯并正常使用,在修改別人代碼bug時(shí)遇到的,接下來為你提供詳細(xì)解決方法,感興趣的你可以參考下哈2013-03-03
MVC使用MvcPager實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了MVC使用MvcPager實(shí)現(xiàn)分頁效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
Asp.Net使用服務(wù)器控件Image/ImageButton顯示本地圖片的方法
Image/ImageButton服務(wù)器控件顯示本地的圖片,實(shí)現(xiàn)思路是數(shù)據(jù)庫中存放了圖片的相對地址,讀取數(shù)據(jù)庫中的地址,用控件加載顯示圖片。具體實(shí)現(xiàn)步驟大家參考下本文2017-08-08

