vscode插件 - quokka

什麼是quokka?
Quokka.js 是一個用於快速開發javascript或typescript的開發者工具。它能在你鍵入代碼的時候，實時將運行的值更新或展現在你的IDE上。

quokka版本

Quokka Community（社區版） 免費的
Quokka Pro（加強版） 收費的，可是新增了一些功能，好比性能測試等。

新建quokka文件

1. ctr+shihft+p 輸入Quokka -> 選擇new file
2. Cmd/Ctrl + K, J新建js文件， Cmd/Ctrl + K, T新建ts文件

實時記錄打印或比較

1. 你可使用console.log或者標示表達式（就是書寫一個普通變量名）來打印任何值信息

1. 你可使用一系列表達式來比較對象

備註：請注意當你使用標示表達式打印信息時，當你顯示的屬性數量和打印對象遍歷深度，你可能會遇到一些限制。
你能夠經過console.log()來解決這個問題

實時代碼覆蓋：

一旦quokka.js運行，你即可以在編輯器的左側裝訂線（邊框）看到代碼的覆蓋。覆蓋是實時的，只要你改動代碼就會自動更新。

• 灰色 - 表明沒有被執行
• 綠色 - 表明已經被執行
• 黃色 - 表明僅部分被執行，Quokka支持分支代碼覆蓋級別，所以若是一行包含邏輯表達式或三元運算符均有覆蓋（執行）和未覆蓋（未執行）分支的，則它將以黃色裝訂線指示器顯示
• 紅色 - 表明該源碼行是錯誤的來源，或者在是錯誤的堆棧中

Value Explorer（實時值瀏覽器）

簡介

Value Explorer 會以一種導航樹的形式實時展現 console.log，identifier expressions, live comments, and the Show Value command所記錄打印的信息

右擊菜單

1. 複製值
2. 複製路徑

節點自動展開（pro版本纔有）

在Identifier Expressions and Live Comments後面加上註釋//?+ 或 /?+/

VS CODE實施共享集成

這是個很實用的功能，特別是在授課的時候，開發通常不會關心這個功能。這裏就不展開介紹了。

Interactive Examples（互動示例）

Wallaby.js團隊策劃了一組交互式示例，咱們在新建quokka文件的時候可使用，這對一些新手或者一些有經驗的開發者的學習頗有幫助。

Live Comments（實時評論）(須要pro版本)

雖然console.log在顯示值方面可能作得很好，但有時您可能須要在表達式中間看到值。
例如，給定一個a.b().c().d()鏈，您可能想在調用.d()以前檢查a.b().c()的結果。
記錄任何表達式的最強大方法是在要記錄的表達式以後當即使用特殊註釋。

Live Value Display(實時值展現)（須要pro版本）

簡介

儘管「實時註釋」功能提供了記錄表達式值的絕佳方法，而且在更改代碼時將始終顯示值，但有時您可能但願在不修改代碼的狀況下顯示或捕獲表達式值。「Show Value」和「Copy Value」功能使您能夠作到這一點。
要使用這些功能，在調用命令時，須要選擇正在記錄的表達式，或者光標位置必須在表達式以後。就像您在光標所在的位置插入實時註釋同樣。使用「Show Value」或「Copy Value」並更改代碼後，「實時值」顯示將被刪除。

Show Value（顯示值）

若是你想要快速的現實某些表達式的值，又不須要改變代碼。實時值顯示容許您經過在編輯器中或使用特殊命令（「Show Value」命令，或使用Cmd + K，V鍵盤快捷鍵）選擇一個表達式來執行此操做。

Copy Value（拷貝值）

若是要在不修改代碼的狀況下將表達式值複製到剪貼板，則「實時值顯示」可以讓您使用特殊命令（「Show Value」命令或Cmd + K，X鍵盤快捷鍵）執行該操做。

項目文件導入

Quokka Community版本 容許您將任何本地安裝的節點模塊導入Quokka文件。
Quokka Pro版本 還容許從您的項目中導入任何文件

快速包導入

無需退出編輯器，該功能容許經過npm或yarn快速安裝任何節點軟件包，甚至沒必要輸入入軟件包名稱，只要代碼中已經有足夠的信息。該軟件包可能僅用於quokka文件環境安裝，所以在您只是嘗試寫一些東西（測試代碼等）時，不會浪費（影戲）您的node_modules文件夾。話雖如此，若是您想這樣作，也能夠將項目的node_modules做爲目標。

(安裝包部分爲pro版)
您能夠安裝缺乏的軟件包，經過懸停消息或快捷鍵Cmd + K(只要有缺乏的軟件包)，或經過命令面板（Quokka.js：Install Missing Package ... 命令）或在quokka輸出中的連接。

默認狀況下，quokka使用npm install {packageName}命令。您能夠經過在quokka配置中設置installPackageCommand值，將其更改成yarn add {packageName}：
{

"installPackageCommand": "yarn add {packageName}"

}

實時性能測試（pro）

該功能使您能夠快速查看代碼各部分的執行狀況。這對於肯定應用程序中可能存在的瓶頸以及進行性能優化，或者只是嘗試觀察不一樣事物的性能很是有用。

將註釋添加到屢次執行的表達式中（例如在循環內），將使該工具顯示總執行時間，平均執行時間（總執行時間除以表達式執行的次數），最小和最大執行時間處理時間。

配置

Quokka.js默認不須要任何配置。它將使用系統的node.js運行您的代碼。若是您不導入任何外部TypeScript模塊，它也可能無需任何配置便可運行您的TypeScript代碼。
若是您想使用Babel / React JSX，或者從Quokka文件中的項目中導入其餘TypeScript文件，或者要覆蓋tsconfig.json設置，則能夠配置quokka.js。
若是您使用的是VS Code，則可使用VS Code用戶設置替代替代咱們的編輯器顯示設置。您能夠在Settings -> Extensions -> Quokka.下的「 VS代碼設置」編輯器中查看可覆蓋的設置。

若是使用的是VS Code，則能夠在VS Code用戶設置（settings.json文件）中覆蓋coverage指示器的顏色。下面的代碼段顯示了Quokka默認顏色的配置。

{
    ...

    "quokka.colors": {
        "covered": "#62b455",
        "errorPath": "#ffa0a0",
        "errorSource": "#fe536a",
        "notCovered": "#cccccc",
        "partiallyCovered": "#d2a032"
    }
}