Notebooks,Visual Studio Code 风格

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

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

一个展示代码单元格、Markdown和丰富图形输出的示例笔记本

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

Notebooks 不仅是优秀的 REPL,它们也是极好的故事讲述工具,允许你将图像、数学公式和解释性文本等 Markdown 元素与代码交织在一起。Notebooks 是与同事或公众社区分享和解释你的想法的完美方式。

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

VS Code中的Notebook支持

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

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

然而,现在有了核心的Notebook APIs,笔记本支持来自VS Code,而不是在隔离的webview中。这意味着笔记本扩展可以与VS Code的其他部分和其他扩展进行交互。例如,像Rainbow Indent这样的编辑器扩展将在笔记本的代码单元格中工作。

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

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

下一节描述了我们审查Notebook API时开发的两个自定义笔记本。

GitHub 问题笔记本

VS Code 团队创建的第一个笔记本体验是 GitHub Issues Notebook。这是一个帮助我们分类和组织 GitHub 上数千个问题的笔记本。通过这个笔记本,我们可以同时检查多个仓库,使用诸如“查找所有标记为 bug 并分配给我的问题”的查询来查找问题。VS Code 团队每天使用这个笔记本来处理团队工作的许多仓库中的问题。

团队使用的GitHub Issues Notebook预览,可在vscode仓库中找到

你可以在VS Code 仓库中的 .vscode/notebooks 找到我们用于分类的特定笔记本。其中有一个名为 inbox.github-issues 的笔记本,用于将新问题分类到适当的区域并分配给相应的人员。

GitHub Issues Notebook 可在 VS Code 市场上供任何人使用。您可以通过安装扩展程序、为您的笔记本创建一个带有 .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 Issues Notebook的源代码在GitHub.com上

REST 书籍

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

在Express应用程序项目中使用REST Book的预览

这个REST Book扩展今天也可以在市场上找到。你可以安装REST Book扩展,创建一个以.restbook结尾的文件,然后执行任何HTTP查询,比如GET github.com

起初,开发REST Book对我来说似乎很复杂,但随着大量VS Code API的可用,编程和创建REST Book比我预期的要容易得多。最值得注意的是,我大量使用了语言API来为我的自定义REST查询语言提供语法高亮和自动完成功能。然后,借助Notebook API,我只需要填充用户想要运行查询时应执行的操作。

你可以查看REST Book的源代码

对于这两个笔记本来说,拥有VS Code笔记本用户界面来创建这些类似REPL的体验是非常棒的。你不需要担心创建和维护自己的用户界面,你可以只专注于功能。

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

观看编程教程

VS Code 团队几个月前录制了一场关于自定义笔记本的直播,在其中,我通过现场编码演示展示了创建自定义笔记本扩展的过程。您可以在 YouTube 上观看:VS Code Notebooks: A Deep Dive。自视频发布以来,一些 Notebook API 已经发生了变化,但原则仍然相同。

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

与社区分享你的想法

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

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

编程快乐!

Tanha Kabir (@_tanhakabir),以及 VS Code 团队 (@code)