🚀 在

筆記本，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 Notebooks 數年，但最近將原生筆記本支援新增至 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 Notebooks，因為我們相信還有許多其他領域可以受益於擁有工具來協助您反覆運算和敘述程式碼。我們公開了新的筆記本 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 Notebooks: A Deep Dive。自影片發布以來，某些筆記本 API 已變更，但原理仍然相同。

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

與社群分享您的想法

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

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

Coding 愉快！

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