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 内核(遵循特定协议以在 Notebook 中运行代码的可执行文件)支持 Julia 或 R 等其他语言。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。它是一个旨在帮助我们分流和整理 GitHub 上成千上万个问题的 Notebook。使用此 Notebook,我们可以一次性检查多个存储库,通过诸如“查找所有标记为 bug 并分配给我的问题”之类的查询来查找问题。VS Code 团队每天都使用此 Notebook 来处理团队所维护的多个存储库中的问题。

您可以在 VS Code 存储库的 .vscode/notebooks 目录下找到我们用于分流的具体 Notebook。其中有一个名为 inbox.github-issues 的文件,用于将新问题分流到各自的领域和负责人处。
GitHub Issues Notebook 可在 VS Code 市场获取,供任何人使用。您可以安装该扩展,创建一个扩展名为 .github-issues 的 Notebook 文件(例如 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 查询体验的启发,我创建了 REST Book,作为我刚加入 VS Code 团队时的学习练习。REST Book 允许您在 Notebook 中进行 HTTP 调用。我发现 REST Book 在通过服务器迭代项目时非常有用,因为我可以随时间进行多次调用,并在一个页面上轻松比较结果。我还使用 REST Book Notebook 设置了一些项目的手动测试,并将文档与测试用例交织在一起。

这个 REST Book 扩展现在也可以在市场上使用。您可以安装 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 推特账号 @code 发推文提出您的想法,或者在 VS Code GitHub 存储库中创建问题。这将让 VS Code 社区阅读和讨论您的 Notebook 想法,并希望能够激励大家将您的 Notebook 变为现实!
我们在本博客中介绍的几个自定义 Notebook 仅仅是一个开始!我们很高兴看到您将启发并创造出什么样的自定义 Notebook 体验!
编码愉快!
Tanha Kabir (@_tanhakabir) 以及 VS Code 团队 (@code)