现已发布!阅读关于 11 月份的新特性和修复。

笔记本,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 Notebooks 还通过 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

你可以在 .vscode/notebooks 下的 VS Code 存储库中找到我们用于分类的特定笔记本。有一个名为 inbox.github-issues 的笔记本,用于将新问题分类到其相应的区域和受让人。

GitHub Issues 笔记本在 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.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 扩展今天也已在市场上提供。你可以安装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)