筆記本，Visual Studio Code 風格

2021 年 11 月 8 日，Tanha Kabir，@_tanhakabir

筆記本是文件，其中包含豐富的 Markdown、可執行的程式碼片段以及隨附的豐富輸出。這些內容都分隔到不同的儲存格中，並且可以以任何順序交錯排列。

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

如果您不熟悉筆記本，您可能熟悉 REPL（讀取-求值-列印迴圈）？REPL 是一種互動式應用程式，您可以在其中編寫幾行程式碼並立即執行程式碼並查看輸出。筆記本是 REPL 的縮影，可讓您快速建立一個環境，讓您可以迭代並處理小段程式碼。

筆記本不僅是出色的 REPL，它們也是出色的說故事工具，可讓您將影像、數學方程式和說明文字等 Markdown 元素與程式碼交錯排列。筆記本可以是與同事或公眾社群分享和解釋您的想法的完美方式。

現今最流行的筆記本形式是 Jupyter Notebook，它在資料科學社群中廣泛使用，並具有豐富的 Python 支援。Jupyter Notebook 也透過 Jupyter 核心（遵循特定協定以在筆記本中執行程式碼的可執行檔）支援 Julia 或 R 等其他語言。Visual Studio Code 多年來一直支援 Jupyter Notebook，但最近在 VS Code 核心中新增了原生筆記本支援。

VS Code 中的筆記本支援

沒錯，筆記本現在是 VS Code 核心功能的一部分！這表示 VS Code 中現在有可用的筆記本 API，讓擴充功能作者可以建立自己的筆記本體驗。任何人都可以製作支援自訂語言和豐富輸出的 VS Code 筆記本擴充功能，而且建立筆記本與建立任何其他擴充功能沒有什麼不同。

在筆記本 API 之前，VS Code 中的 Jupyter Notebook 支援僅由 Jupyter 擴充功能提供。該擴充功能在隔離的 webview 中建立其筆記本體驗，有點像 VS Code 中的獨立網頁，無法與您安裝的任何其他擴充功能對話。

然而，現在有了核心筆記本 API，筆記本支援來自 VS Code，而不是在隔離的 webview 中。這表示筆記本擴充功能可以與 VS Code 的其餘部分和其他擴充功能互動。例如，編輯器擴充功能（如 Rainbow Indent）將在您的筆記本的程式碼儲存格中運作。

筆記本 API 不僅限於 Jupyter Notebook，因為我們相信還有許多其他領域可以受益於擁有一個工具來幫助您迭代和敘述您的程式碼。我們公開了新的筆記本 API，供任何擴充功能作者製作自己的自訂筆記本。

筆記本擴充功能生態系統的開端

下一節介紹我們在審查筆記本 API 時開發的兩個自訂筆記本。

GitHub Issues 筆記本

VS Code 團隊建立的第一個筆記本體驗是 GitHub Issues 筆記本。它是一個筆記本，旨在幫助我們分類和整理我們在 GitHub 中擁有的數千個問題。透過此筆記本，我們可以一次檢查多個儲存庫，以使用查詢（例如「尋找所有標記為 bug 且分配給我的問題」）來尋找問題。VS Code 團隊每天使用此筆記本來處理團隊處理的許多儲存庫中的問題。

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

您可以在 VS Code 儲存庫的 .vscode/notebooks 下找到我們用於分類的特定筆記本。有一個名為 inbox.github-issues 的筆記本，用於將新問題分類到其適當的區域和受讓人。

GitHub Issues 筆記本在 VS Code Marketplace 上提供，供任何人使用。您可以安裝擴充功能、使用 .github-issues 副檔名（例如 my-notebook.github-issues）為您的筆記本建立檔案，然後建立查詢（例如）來試用它：

$repo=repo:microsoft/vscode-github-issue-notebooks
$repo is:open no:assignee

用於建立查詢的筆記本語言 github-issues 幾乎與 GitHub.com 上使用的語法相同。GitHub Issues 筆記本語言中的一個新增功能是它允許您建立變數並在任何其他儲存格中使用它們。

您可以在 GitHub.com 上的此處檢視 GitHub Issues 筆記本的原始程式碼。

REST Book

受到 GitHub Issues 筆記本中的查詢體驗的啟發，當我剛加入 VS Code 團隊時，我建立了 REST Book 作為學習練習。REST Book 可讓您在筆記本中進行 HTTP 呼叫。我發現 REST Book 對於迭代我與伺服器的專案很有用，因為能夠隨著時間的推移進行多次呼叫並輕鬆地在一個頁面上比較結果。我也使用 REST Book 筆記本來設定專案的一些手動測試，文件與測試案例交錯排列。

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 查詢語言進行語法醒目提示和自動完成。然後，透過筆記本 API，我只需要填寫使用者想要執行查詢時應該執行的操作。

您可以在此處檢視 REST Book 的原始程式碼。

對於這兩個筆記本，能夠使用 VS Code 筆記本 UI 來建立這些類似 REPL 的體驗真是太棒了。您不必擔心建立和維護自己的 UI，您可以專注於功能。

製作您自己的自訂筆記本擴充功能

觀看程式碼教學

VS Code 團隊在幾個月前錄製了關於自訂筆記本的直播，在其中，我在一個即時程式碼示範中展示了建立自訂筆記本擴充功能的樣子。您可以在 YouTube 上觀看：VS Code 筆記本：深入探討。自影片發布以來，一些筆記本 API 已變更，但原理仍然相同。

當您準備好建立自己的筆記本擴充功能時，如需最新和最詳細的資訊，您可以參考筆記本擴充功能作者指南。

與社群分享您的想法

如果您對建立自己的筆記本擴充功能不感興趣，但對有用的應用程式有想法，我們鼓勵您在 VS Code Twitter 帳戶 @code 上發布筆記本想法的推文，或在 VS Code GitHub 儲存庫中建立問題。這將讓 VS Code 社群閱讀和討論您的筆記本想法，並有望激勵人們將您的筆記本變成現實！

我們在這篇部落格中介紹的幾個自訂筆記本僅僅是開始！我們很高興看到您將激發和創造哪些自訂筆記本體驗！

快樂編碼！

Tanha Kabir（@_tanhakabir）和 VS Code 團隊（@code）