笔记本,Visual Studio Code 风格

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

笔记本是包含丰富 Markdown、可执行代码片段以及随附的丰富输出的组合的文档。这些都被分成不同的单元,并且可以以任何顺序交错。

显示代码单元、Markdown 和丰富的图形输出的示例笔记本

如果您不熟悉笔记本,您可能熟悉 REPL(读取-评估-打印循环)?REPL 是一个交互式应用程序,您可以在其中编写几行代码并立即执行代码并查看输出。笔记本是 REPL 的缩影,可让您快速创建一个可以迭代和处理小块代码的环境。

笔记本不仅是很棒的 REPL,而且还是很棒的讲故事设备,允许您将图像、数学方程和解释性文本等 Markdown 元素与代码交织在一起。笔记本是与同事或公共社区分享和解释您的想法的完美方式。

当今最流行的笔记本形式是 Jupyter Notebook,它在数据科学社区中广泛使用,具有丰富的 Python 支持。Jupyter Notebooks 还通过 Jupyter 内核支持其他语言,例如 Julia 或 R,这些可执行文件遵循特定协议在笔记本中运行代码。Visual Studio Code 多年来一直支持 Jupyter Notebooks,但最近在 VS Code 核心中添加了本机笔记本支持。

VS Code 中的笔记本支持

没错,笔记本现在已经成为 VS Code 核心功能的一部分!这意味着 VS Code 中现在提供了Notebook API,可让扩展作者创建自己的笔记本体验。任何人都可以制作支持自定义语言和丰富输出的 VS Code 笔记本扩展,并且创建笔记本与创建任何其他扩展没有什么不同。

在 Notebook API 之前,VS Code 中的 Jupyter Notebook 支持仅由Jupyter 扩展提供。该扩展在独立的 Web 视图中创建了笔记本体验,有点像 VS Code 中的独立网页,无法与您安装的任何其他扩展进行通信。

但是,现在有了核心Notebook API,笔记本支持来自 VS Code,并且不在独立的 Web 视图中。这意味着笔记本扩展可以与 VS Code 的其余部分和其他扩展进行交互。例如,Rainbow Indent等编辑器扩展可以在笔记本的代码单元中使用。

Notebook API 不仅限于 Jupyter Notebook,因为我们相信还有许多其他领域可以从帮助您迭代和叙述代码的工具中受益。我们公开了新的Notebook API,供任何扩展作者制作自己的自定义笔记本。

笔记本扩展生态系统的开端

下一节将介绍我们在审查 Notebook API 时开发的两个自定义笔记本。

GitHub 问题笔记本

VS Code 团队创建的第一个笔记本体验是GitHub Issues Notebook。它是一个笔记本,可以帮助我们分类和组织 GitHub 中的数千个问题。bug使用此笔记本,我们可以一次检查多个存储库,以使用诸如“查找标记并分配给我的所有问题”之类的查询来查找问题。VS Code 团队每天使用此笔记本来处理团队处理的许多存储库中的问题。

我们在团队中使用的 GitHub 问题笔记本的预览可在 vscode 存储库中找到

您可以在VS Code 存储库.vscode/notebooks中找到我们用于分类的特定笔记本。有人要求inbox.github-issues将新问题分类到适当的领域和受让人。

GitHub Issues Notebook 在 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 Notebook 语言的一项新增功能是,它允许您创建变量并在任何其他单元中使用它们。

您可以在 GitHub.com 上查看 GitHub Issues Notebook 的源代码。

休息书

受到 GitHub Issues Notebook 中查询体验的启发,我在第一次加入 VS Code 团队时创建了REST Book作为学习练习。REST Book 允许您在笔记本中进行 HTTP 调用。我发现 REST Book 对于使用服务器迭代我的项目很有用,因为它能够随着时间的推移进行多次调用并在一页上轻松比较结果。我还使用 REST Book 笔记本对我的项目进行一些手动测试,其中文档与测试用例交错。

在带有 Express App 的项目中使用的 REST Book 的预览

此 REST Book 扩展现已在 Marketplace 上提供。您可以安装REST Book扩展,创建一个以结尾的文件.restbook,然后执行任何 HTTP 查询,例如GET github.com.

起初,开发 REST Book 对我来说似乎很复杂,但由于有大量可用的 VS Code API,编程和创建 REST Book 比我预想的要容易得多。最值得注意的是,我大量使用语言 API 来为我的自定义 REST 查询语言进行语法突出显示和自动完成。然后,使用 Notebook API,我只需要填写当用户想要运行查询时应该执行的操作。

您可以在此处查看 REST Book 的源代码。

对于这两个笔记本来说,使用 VS Code Notebook UI 来创建这些类似 REPL 的体验真是太棒了。您无需担心创建和维护自己的 UI,只需专注于功能即可。

制作您自己的自定义笔记本扩展

观看编码教程

VS Code 团队几个月前录制了一个关于自定义笔记本的直播,在其中,我通过实时编码演示展示了创建自定义笔记本扩展的情况。您可以在 YouTube 上观看:VS Code Notebooks:深入探讨。自视频发布以来,一些 Notebook API 发生了变化,但原理仍然相同。

当您准备好构建自己的笔记本扩展时,有关最新的详细信息,您可以参考笔记本扩展作者指南

与社区分享您的想法

如果您对创建自己的笔记本扩展不感兴趣,但对有用的应用程序有想法,我们鼓励您在 VS Code Twitter 帐户@code上发布笔记本想法,或在VS Code GitHub 存储库中创建问题。这将使 VS Code 社区阅读并讨论您的笔记本想法,并希望激励人们将您的笔记本变成现实!

我们在本博客中介绍的一些定制笔记本只是一个开始!我们很高兴看到您将激发和创造出什么样的定制笔记本体验!

快乐编码!

Tanha Kabir ( @_tanhakabir ) 和 VS Code 团队 ( @code )