Visual Studio Code 風格的 Notebook

2021年11月8日，作者：Tanha Kabir, @_tanhakabir

Notebook 是一種文件，它包含了豐富的 Markdown、可執行的程式碼片段以及相應的富文字輸出。這些內容被分離到不同的單元格中，並可以按任意順序穿插排列。

An example notebook showing code cells, Markdown, and a rich graph output

如果你對 Notebook 不太熟悉，你可能熟悉 REPL（讀取-求值-列印迴圈）吧？REPL 是一個互動式應用程式，你可以在其中編寫幾行程式碼並立即執行，然後檢視輸出。Notebook 是 REPL 的典範，能讓你快速建立一個環境，在其中迭代和處理小塊程式碼。

Notebook 不僅是出色的 REPL，它們也是絕佳的敘事工具，允許你將 Markdown 元素（如圖片、數學公式和解釋性文字）與程式碼交織在一起。Notebook 可以是與同事或社群分享和解釋你想法的完美方式。

當今最流行的 Notebook 形式是 Jupyter Notebook，它在資料科學界被廣泛使用，並提供了豐富的 Python 支援。Jupyter Notebook 也透過 Jupyter 核心支援其他語言，如 Julia 或 R。Jupyter 核心是遵循特定協議的可執行檔案，用於在 Notebook 中執行程式碼。Visual Studio Code 支援 Jupyter Notebook 已有數年，但最近已將原生 Notebook 支援新增到 VS Code 核心中。

VS Code 中的 Notebook 支援

沒錯，Notebook 現在已成為 VS Code 核心功能的一部分！這意味著 VS Code 中現在提供了Notebook API，讓擴充套件開發者可以建立自己的 Notebook 體驗。任何人都可以製作一個支援自定義語言和富文字輸出的 VS Code 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 Notebook，因為我們相信還有許多其他領域可以從擁有一個幫助你迭代和敘述程式碼的工具中受益。我們已將新的Notebook API公開，供任何擴充套件開發者打造自己的自定義 Notebook。

Notebook 擴充套件生態系統的開端

下一節將介紹我們在審查 Notebook API 時開發的兩個自定義 Notebook。

GitHub Issues Notebook

VS Code 團隊建立的第一個 Notebook 體驗是 GitHub Issues Notebook。這是一個幫助我們分類和整理 GitHub 上成千上萬個 Issue 的 Notebook。透過這個 Notebook，我們可以一次性檢查多個倉庫，使用諸如“查詢所有標記為 bug 並分配給我的 Issue”之類的查詢來查詢問題。VS Code 團隊每天都使用這個 Notebook 來處理團隊所工作的多個倉庫中的 Issue。

A preview of the GitHub Issues Notebook we use on the team that's available in the vscode repo

你可以在 VS Code 倉庫的 .vscode/notebooks 目錄下找到我們用於分類的具體 Notebook。其中有一個名為 inbox.github-issues 的檔案，用於將新的 Issue 分類到合適的領域和負責人。

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 為我的專案設定了一些手動測試，並將文件與測試用例穿插在一起。

A preview of the REST Book being used in a project with an Express App

這個 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: A Deep Dive。自影片釋出以來，一些 Notebook API 已經發生了變化，但基本原理仍然相同。

當你準備構建自己的 Notebook 擴充套件時，可以參考Notebook 擴充套件開發者指南，以獲取最新、最詳細的資訊。

與社群分享你的想法

如果你對建立自己的 Notebook 擴充套件不感興趣，但對有用的應用有想法，我們鼓勵你在 VS Code 的 Twitter 賬號 @code 上釋出你的 Notebook 想法，或者在 VS Code 的 GitHub 倉庫中建立 Issue。這將讓 VS Code 社群能夠閱讀和討論你的 Notebook 想法，並希望能激勵人們將你的 Notebook 變為現實！

我們在這篇部落格中介紹的幾個自定義 Notebook 僅僅是一個開始！我們很期待看到你將激發和創造出什麼樣的自定義 Notebook 體驗！

編碼愉快！

Tanha Kabir (@_tanhakabir) 及 VS Code 團隊 (@code)