1. 程式人生 > >【轉】Visual Studio Code 使用 Typings 實現智慧提示功能

【轉】Visual Studio Code 使用 Typings 實現智慧提示功能

我們知道在IDE中程式碼的智慧提示幾乎都是標配,雖然一些文字編輯器也有一些簡單的提示,但這是通過程式碼片段提供的。功能上遠不能和IDE相比。不過最近興起的文字編輯器的新銳 Visual Studio Code 可以通過Typings來對JavaScript實現智慧提示功能,對於一個文字編輯器來說,這點很難得。所以Visual Studio Code 特別適合用來編寫JavaScript(Node.js)程式; 同時,如果我們需要編寫一些嘗試性的小程式碼片段,例如:Lodash.js某個函式的小Demo,因為我們不想研究一個函式的使用方式而去使用IDE新建一個專案,這時候Visual Studio Code 就是一個非常好的選擇,而且它同樣可以執行和除錯JavaScript

程式碼(依賴於Node.js),並且還包含非常方便的程式碼提示功能。

從這點來說,我覺得Visual Studio Code 已經算得上是一個精悍的小型IDE了。

通過NPM安裝Typings

通過NPM我們可以很容易的安裝Typings,在命令列中輸入:

npm install -g typings

安裝完成後,在命令列中輸入:

typings --version

看到版本資訊就表示typings工具安裝完成了:

Typings Terminal

NPM是和Node.js一起安裝的,如果你想使用NPM的話,那麼你應該先安裝Node.js

安裝相關提示資訊檔案

安裝完成後,我們需要安裝相應的需要提示功能庫或者框架的型別資訊檔案,在這裡我們新建一個資料夾NodeSnippet

,使用命令列進入到該目錄中,分別輸入下面兩個命令來安裝NodeLodash的型別介面資訊檔案:

typings install dt~node --global --save
typings install lodash --save

什麼時候需要使用--global引數:

  • 如果安裝的包使用script標記來引用(如jQuery)(也就是在瀏覽器中使用)
  • 這個包是屬於環境的一部分(如node)時
  • 該包沒有使用--global安裝失敗時

這時候我們可以看到我們的NodeSnippet目錄中多了一些檔案:

Typings Definition Files

這些檔案就是為我們提供提示資訊的型別型別檔案(使用TypeScript定義)。檢視Typings是否支援某個庫或框架的智慧提示,我們可以使用下面的命令:

typings search exampleName

啟用智慧提示功能

通過兩種方式來啟動提示功能:

  • 第一種是在需要進行只能提示的檔案最上行增加提示資訊檔案所在目錄,格式如下:
/// <reference path="./typings/index.d.ts"/>
  • 第二種是在專案所在目錄(在這裡是NodeSnippet資料夾中)增加一個名為jsconfig.json的空檔案。

啟用提示功能後我們就可以非常愉快的使用Visual Studio Code 為我們提供的智慧提示功能了。如下所示:

IntelliSense VsCode

注意事項

Typings VS TSD

Typings是作為TSD的替代者而出現的,如果你已經安裝了TSD,那麼需要知道現在TSD已經不推薦使用了。如果已經安裝TSD請執行下面的命令來移除它:

 npm rm -g tsd

使用 CNPM

在國內由於的原因,有時候使用NPM安裝模組的速度上會很慢,這時候我們其實可以選擇國內淘寶的NPM映象,使用下面的命令來進行安裝:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完成後使用cnpm來代替npm命令即可,例如下面安裝一個lodash模組的示例:

cnpm install lodash 

可以看到除了cnpm替代了npm其他的並沒有任何區別。

參考&進一步閱讀

相關推薦

Visual Studio Code 使用 Typings 實現智慧提示功能

我們知道在IDE中程式碼的智慧提示幾乎都是標配,雖然一些文字編輯器也有一些簡單的提示,但這是通過程式碼片段提供的。功能上遠不能和IDE相比。不過最近興起的文字編輯器的新銳 Visual Studio Code 可以通過Typings來對JavaScript實現智慧提示功能,對於一個文字編輯器來說,這點很難得。

10.Visual Studio Code 必備外掛,主題及語法提示

原文地址:http://www.css88.com/archives/8064 小編推薦:掘金是一個面向程式設計師的高質量技術社群,從 一線大廠經驗分享到前端開發最佳實踐,無論是入門還是進階,來掘金你不會錯過前端開發的任何一個技術乾貨。 Visual Studio Code 是由微軟開發的一款免

Visual Studio單元測試小應用-測執行時間

line Language cat parse esc net 技術分享 javascrip huang 【轉】Visual Studio單元測試小應用-測執行時間 Visual Studio的單元測試會記錄每一個測試的執行時間,如果有幾個Method要測效能,以前我會用

UnityVisual Studio Code之常備快捷鍵

Visual Studio Code是個牛逼的編輯器,啟動非常快,完全可以用來代替其他文字檔案編輯工具。又可以用來做開發,支援各種語言,相比其他IDE,輕量級完全可配置還整合Git感覺非常的適合前端開發。 所以我仔細研究了一下文件未來可能會作為主力工具使用。 主命令框

Visual Studio Code 使用 Typings 實現智慧提示功能

前言 我們知道在IDE中程式碼的智慧提示幾乎都是標配,雖然一些文字編輯器也有一些簡單的提示,但這是通過程式碼片段提供的。功能上遠不能和IDE相比。不過最近興起的文字編輯器的新銳 Visual Studio Code 可以通過 Typings 來對 JavaScript 

編輯器Visual Studio Code

gre 檢查 導入 adg llc 路徑 source should href 官網:https://code.visualstudio.com/Download 插件:https://github.com/varHarrie/varharrie.github.io/iss

Visual C++ 和 C++ 有什麽區別?

業界 流行 編譯器 gtk+ 語言 開發 多種實現 廠商 計算 有位同學問我“Visual C++和C++有什麽區別?”,這的確是初學者會感到困惑的問題,比較常見。除此之外,還有“先學C++好,還是先學Visual C++好?”,都屬於同樣的概念不明的問題,就比

Android Studio打包全攻略---從入門到精通

UC store 類型 安裝文件 public alt url tool 描述 原文地址:http://blog.csdn.net/zivensonice/article/details/51672846 初出茅廬 手動打包 怎麽手動打包 項目寫完了,現在需要把應用上傳

微信小程序實現微信支付功能(可用)

arr 必須 enc red use sam func 結束 單表 原博: https://blog.csdn.net/fredrik/article/details/79697963 微信小程序實現微信支付功能 直接把裏面的參數替換成你的就

UAP studio基礎使用技巧

【轉載】原文來源: https://blog.csdn.net/github_34367377/article/details/82253763 Part 1 1.表格翻頁方法的重寫 me.gridView.getDataGrid().onpageindexchan

百度地圖Canvas實現十萬CAD資料秒級載入

Github上看到: https://github.com/lcosmos/map-canvas 這個實現颱風軌跡,這個資料量非常龐大,當時開啟時,看到這麼多資料載入很快,感到有點震驚,然後自己研究了一番,發現作者採用的是Canvas作為百度的自定義覆蓋層。 <!DOCTYPE html&

百度地圖Canvas實現十萬CAD數據秒級加載

api contex ext key lan nta quic position pat Github上看到: https://github.com/lcosmos/map-canvas 這個實現臺風軌跡,這個數據量非常龐大,當時打開時,看到這麽多數據加載很快,感到有

[Android Studio] Android Studio如何刪除module(轉載)

[Android Studio] Android Studio如何刪除module(轉載) 轉載地址:http://blog.csdn.net/hyr83960944/article/details/37519299 當你想在Android Studio中刪除某個module時,大家習慣性的

工具Visual Studio 2017安裝提示:找不到與以下引數匹配的產品

問題: 下載好Visual Studio 2017 Installer執行安裝時,提示: 解決: 刪除隱藏檔案C:\ProgramData\Microsoft\VisualStudio\Packages; cmd視窗中執行C:\Program Files (x

基於Redis Lua指令碼實現的分散式鎖(Java實現

最近專案中需要用到一個分散式的鎖,考慮到基於會話節點實現的zookeeper鎖效能不夠,於是想使用redis來實現一個分散式的鎖。看了網上的幾個實現方案後,發現都不夠嚴謹。比如這篇:用Redis實現分散式鎖裡面設計的鎖有個最大的問題是鎖的超時值TTL會一直被改寫

廣州.NET社群推薦Visual Studio 2019 中 WPF & UWP 的 XAML 開發工具新特性

原文 | Dmitry 翻譯 | 鄭子銘 自Visual Studio 2019推出以來,我們為使用WPF或UWP桌面應用程式的XAML開發人員釋出了許多新功能。在本週的 Visual Studio 2019 版本 16.4 和 16.5 Preview 1中,我們希望藉此機會回顧一下全年的新變化。如果您錯過

Visual Studio 2019 的 Local Process with Kubernetes

  今天,我們自豪地宣佈 Local Process with Kubernetes 的預覽版已加入到 Visual Studio 2019 16.7 Preview 2 中。    Local Process with Kubernetes 允許您在開發工作站上編寫、測試和除錯 .NET 微服務程式碼,同時

Visual Studio 的 Razor 編輯器的改進

  自從我們在一個通用的 Razor 語言伺服器上釋出了 Visual Studio 的一個新的實驗性 Razor 編輯器的第一個預覽版以來,已經過去了6個月,現在是時候更新一下我們的進展了。團隊一直在努力使新的 Razor 編輯器達到與舊的同等水平,修復 bug,並新增許多很棒的新功能。我們認為新

使用Eclipse自帶的導出功能

eat margin ram 有用 scroll nis 地址 項目 mage 轉載地址:http://www.xuebuyuan.com/759047.html Eclipse打包(導出)jar文件攻略(一)–使用Eclipse自帶的導出功能 2012年1

Visual Studio Code 新增C/C++編譯功能

VS Code作為一個文字/程式碼編輯器,相較於VS比較輕量化,而且可以支援C/C++、Python等多種語言,並具有豐富的拓展模組。 但是作為一個編輯器,在VS Code上安裝C/C++模組之後,並不能進行程式碼的編譯和debug,需要另行安裝。 官方推薦的較為流行的有    GCC (Linux