Notebooks,Visual Studio Code 風格
2021 年 11 月 8 日,作者:Tanha Kabir,@_tanhakabir
Notebooks 是一種文件,其中混合了豐富的 Markdown、可執行程式碼片段和隨附的豐富輸出。所有這些都分成不同的單元格,並且可以按任意順序交錯。

如果你不熟悉 notebooks,你可能熟悉 REPL(讀取-求值-列印迴圈)?REPL 是一種互動式應用程式,你可以在其中編寫幾行程式碼並立即執行程式碼並檢視輸出。Notebooks 是 REPL 的精髓,它允許你快速建立一個環境,你可以在其中迭代和處理小塊程式碼。
Notebooks 不僅是出色的 REPL,還是出色的講故事工具,它允許你將影像、數學公式和解釋性文字等 Markdown 元素與程式碼交錯在一起。Notebooks 是與同事或公眾社群分享和解釋你的想法的完美方式。
當今最流行的 notebook 形式是 Jupyter Notebook,它在資料科學社群中廣泛使用,並提供豐富的 Python 支援。Jupyter Notebooks 還透過 Jupyter kernels 支援其他語言,例如 Julia 或 R。Jupyter kernels 是遵循特定協議在 notebook 中執行程式碼的可執行檔案。Visual Studio Code 已經支援 Jupyter Notebooks 多年,但最近將原生 notebook 支援新增到了 VS Code 核心。
VS Code 中的 Notebook 支援
沒錯,notebooks 現在是 VS Code 核心功能的一部分!這意味著 VS Code 中現在有Notebook API,允許擴充套件作者建立自己的 notebook 體驗。任何人都可以製作一個支援自定義語言和豐富輸出的 VS Code notebook 擴充套件,建立 notebook 與建立任何其他擴充套件沒有區別。
在 Notebook API 之前,VS Code 中的 Jupyter Notebook 支援完全由 Jupyter 擴充套件提供。該擴充套件在孤立的 webview 中建立了其 notebook 體驗,有點像 VS Code 中的一個獨立網頁,無法與你安裝的任何其他擴充套件進行通訊。
然而,現在有了核心Notebook API,notebook 支援來自 VS Code,並且不在孤立的 webview 中。這意味著 notebook 擴充套件可以與 VS Code 的其餘部分和其他擴充套件互動。例如,像 Rainbow Indent 這樣的編輯器擴充套件將在 notebook 的程式碼單元格中工作。
Notebook API 不限於 Jupyter Notebooks,因為我們相信還有許多其他領域可以受益於擁有一個幫助你迭代和敘述程式碼的工具。我們向任何擴充套件作者公開了新的Notebook API,以便他們可以製作自己的自定義 notebook。
notebook 擴充套件生態系統的開端
下一節描述了我們在審查 Notebook API 時開發的兩個自定義 notebook。
GitHub Issues Notebook
VS Code 團隊建立的第一個 notebook 體驗是 GitHub Issues Notebook。它是一個 notebook,用於幫助我們分類和組織我們在 GitHub 中的數千個問題。使用此 notebook,我們可以同時檢查多個儲存庫,使用查詢(例如“查詢所有標記為 bug 並分配給我的問題”)查詢問題。VS Code 團隊每天使用此 notebook 來處理團隊處理的許多儲存庫中的問題。

你可以在 VS Code 儲存庫中的 .vscode/notebooks 下找到我們用於分類的具體 notebook。有一個名為 inbox.github-issues 的 notebook,用於將新問題分類到適當的區域和經辦人。
GitHub Issues Notebook 在 VS Code Marketplace 上可用供任何人使用。你可以透過安裝擴充套件來試用它,為你的 notebook 建立一個檔案,副檔名為 .github-issues,例如 my-notebook.github-issues,然後建立如下查詢:
$repo=repo:microsoft/vscode-github-issue-notebooks
$repo is:open no:assignee
用於建立查詢的 notebook 語言 github-issues 與 GitHub.com 上使用的語法幾乎相同。GitHub Issues Notebook 語言中的一個補充是它允許你建立變數並在任何其他單元格中使用它們。
你可以在 GitHub.com 上檢視 GitHub Issues Notebook 的原始碼。
REST Book
受到 GitHub Issues Notebook 中查詢體驗的啟發,我在剛加入 VS Code 團隊時建立了 REST Book 作為學習練習。REST Book 允許你在 notebook 中進行 HTTP 呼叫。我發現 REST Book 對於迭代我的帶有伺服器的專案很有用,因為它能夠隨著時間的推移進行多次呼叫,並在一頁上輕鬆比較結果。我還使用 REST Book notebook 來設定一些專案的手動測試,並將文件與測試用例交錯在一起。

這個 REST Book 擴充套件今天也在 Marketplace 上可用。你可以安裝 REST Book 擴充套件,建立一個以 .restbook 結尾的檔案,然後執行任何 HTTP 查詢,例如 GET github.com。
開發 REST Book 一開始對我來說似乎很複雜,但是有了大量的 VS Code API,程式設計和建立 REST Book 比我預期的要容易得多。最值得注意的是,我大量使用了語言 API 來為我的自定義 REST 查詢語言進行語法高亮顯示和自動補全。然後使用 Notebook API,我只需要填寫當用戶想要執行查詢時應該做什麼。
你可以在此處檢視 REST Book 的原始碼。
對於這兩個 notebook,擁有 VS Code Notebook UI 來建立這些類似 REPL 的體驗非常棒。你不需要擔心建立和維護自己的 UI,你可以只關注功能。
製作你自己的自定義 notebook 擴充套件
觀看編碼教程
VS Code 團隊在幾個月前錄製了一場關於自定義 notebook 的直播,在其中,我透過現場編碼演示展示了建立自定義 notebook 擴充套件的感覺。你可以在 YouTube 上觀看它:VS Code Notebooks:深度探究。自從影片釋出以來,一些 Notebook API 發生了變化,但原理仍然相同。
當你準備構建自己的 notebook 擴充套件時,你可以參考Notebook 擴充套件作者指南,獲取最新和詳細的資訊。
與社群分享你的想法
如果你對建立自己的 notebook 擴充套件不感興趣,但對有用的應用程式有想法,我們鼓勵你在 VS Code Twitter 帳戶 @code 上釋出 notebook 想法,或者在 VS Code GitHub 儲存庫中建立問題。這將使 VS Code 社群能夠閱讀和討論你的 notebook 想法,並希望激發人們將你的 notebook 變為現實!
我們在本部落格中介紹的幾個自定義 notebook 僅僅是一個開始!我們很高興看到你會激發和創造出什麼樣的自定義 notebook 體驗!
編碼愉快!
Tanha Kabir (@_tanhakabir) 和 VS Code 團隊 (@code)