Notebooks, im Stil von Visual Studio Code

8. November 2021 von Tanha Kabir, @_tanhakabir

Notebooks sind Dokumente, die eine Mischung aus Rich Markdown, ausführbaren Code-Snippets und begleitenden Rich-Ausgaben enthalten. Diese sind alle in separate Zellen aufgeteilt und können in beliebiger Reihenfolge miteinander verknüpft werden.

Wenn Sie mit Notebooks nicht vertraut sind, sind Sie vielleicht mit REPLs (Read-Eval-Print Loop) vertraut? Ein REPL ist eine interaktive Anwendung, in der Sie ein paar Codezeilen schreiben, den Code sofort ausführen und die Ausgabe sehen können. Notebooks sind die Quintessenz eines REPL und ermöglichen es Ihnen, schnell eine Umgebung zu erstellen, in der Sie iterieren und an kleinen Code-Blöcken arbeiten können.

Notebooks sind nicht nur großartige REPLs, sondern auch großartige Erzählwerkzeuge, da sie es Ihnen ermöglichen, Markdown-Elemente wie Bilder, mathematische Gleichungen und erklärenden Text mit Ihrem Code zu verknüpfen. Notebooks können eine perfekte Möglichkeit sein, Ihre Ideen mit Kollegen oder der breiten Öffentlichkeit zu teilen und zu erklären.

Die heute beliebteste Form von Notebooks ist das Jupyter Notebook, das in der Data-Science-Community mit umfangreicher Python-Unterstützung weit verbreitet ist. Jupyter Notebooks unterstützen auch andere Sprachen wie Julia oder R über Jupyter-Kernels, ausführbare Programme, die einem spezifischen Protokoll folgen, um Code in Ihrem Notebook auszuführen. Visual Studio Code unterstützt Jupyter Notebooks seit mehreren Jahren, hat aber kürzlich native Notebook-Unterstützung in den VS Code-Kern integriert.

Notebook-Unterstützung in VS Code

Das stimmt, Notebooks sind jetzt Teil der Kernfunktionalität von VS Code! Das bedeutet, dass jetzt Notebook-APIs in VS Code verfügbar sind, damit Erweiterungsautoren ihre eigenen Notebook-Erfahrungen erstellen können. Jeder kann eine VS Code-Notebook-Erweiterung erstellen, die benutzerdefinierte Sprachen und Rich-Ausgaben unterstützt, und die Erstellung eines Notebooks unterscheidet sich nicht von der Erstellung anderer Erweiterungen.

Vor den Notebook-APIs wurde die Jupyter-Notebook-Unterstützung in VS Code ausschließlich von der Jupyter-Erweiterung beigesteuert. Die Erweiterung erstellte ihre Notebook-Erfahrung in einem isolierten Webview, ähnlich einer unabhängigen Webseite innerhalb von VS Code, die nicht mit anderen installierten Erweiterungen kommunizieren kann.

Mit den Kern- Notebook-APIs kommt die Notebook-Unterstützung jedoch nun von VS Code und befindet sich nicht mehr in einem isolierten Webview. Das bedeutet, dass Notebook-Erweiterungen mit dem Rest von VS Code und anderen Erweiterungen interagieren können. Beispielsweise funktionieren Editor-Erweiterungen wie Rainbow Indent in den Codezellen Ihrer Notebooks.

Die Notebook-APIs sind nicht auf Jupyter Notebooks beschränkt, da wir glauben, dass viele andere Domänen von einem Werkzeug profitieren können, das Ihnen hilft, Ihren Code zu iterieren und zu erzählen. Wir haben die neuen Notebook-APIs für jeden Erweiterungsautor öffentlich zugänglich gemacht, um seine eigenen benutzerdefinierten Notebooks zu erstellen.

Beginn eines Notebook-Erweiterungs-Ökosystems

Der nächste Abschnitt beschreibt zwei benutzerdefinierte Notebooks, die wir bei der Überprüfung der Notebook-API entwickelt haben.

GitHub Issues Notebook

Die erste Notebook-Erfahrung, die das VS Code-Team entwickelte, war das GitHub Issues Notebook. Es ist ein Notebook, das uns hilft, die Tausenden von Issues auf GitHub zu sortieren und zu organisieren. Mit diesem Notebook können wir mehrere Repos gleichzeitig untersuchen, um Issues mithilfe von Abfragen wie "Finde alle Issues mit dem Label bug, die mir zugewiesen sind" zu finden. Das VS Code-Team nutzt dieses Notebook täglich, um Issues über die vielen Repos zu verarbeiten, an denen das Team arbeitet.

Sie finden die spezifischen Notebooks, die wir für die Triage verwenden, im VS Code-Repository unter .vscode/notebooks. Es gibt eines namens inbox.github-issues, um neue Issues ihrem entsprechenden Bereich und Bearbeiter zuzuweisen.

GitHub Issues Notebook ist im VS Code Marketplace verfügbar und kann von jedem genutzt werden. Sie können es ausprobieren, indem Sie die Erweiterung installieren, eine Datei für Ihr Notebook mit der Dateiendung .github-issues wie my-notebook.github-issues erstellen und dann Abfragen erstellen wie

$repo=repo:microsoft/vscode-github-issue-notebooks
$repo is:open no:assignee

Die Notebook-Sprache github-issues, die zum Erstellen der Abfragen verwendet wird, ist fast identisch mit der Syntax, die auf GitHub.com verwendet wird. Eine Ergänzung in der GitHub Issues Notebook-Sprache ist, dass sie es Ihnen erlaubt, Variablen zu erstellen und diese in anderen Zellen zu verwenden.

Sie können den Quellcode für das GitHub Issues Notebook hier auf GitHub.com einsehen.

REST Book

Inspiriert von der Abfrageerfahrung im GitHub Issues Notebook habe ich REST Book als Lernübung erstellt, als ich dem VS Code-Team beitrat. REST Book ermöglicht es Ihnen, HTTP-Aufrufe in einem Notebook zu tätigen. Ich fand REST Book nützlich, um meine Projekte mit einem Server zu iterieren, indem ich über die Zeit mehrere Aufrufe tätigen und die Ergebnisse einfach auf einer Seite vergleichen konnte. Ich habe auch REST Book Notebooks verwendet, um manuelles Testen meines Projekts einzurichten, wobei die Dokumentation mit den Testfällen verknüpft war.

Diese REST Book-Erweiterung ist heute ebenfalls im Marketplace verfügbar. Sie können die REST Book-Erweiterung installieren, eine Datei mit der Endung .restbook erstellen und dann beliebige HTTP-Abfragen wie GET github.com durchführen.

Die Entwicklung von REST Book schien mir zunächst kompliziert, aber mit der großen Anzahl verfügbarer VS Code-APIs war die Programmierung und Erstellung von REST Book viel einfacher als erwartet. Insbesondere habe ich die Sprach-APIs intensiv für Syntaxhervorhebung und Autovervollständigung für meine benutzerdefinierte REST-Abfragesprache genutzt. Mit den Notebook-APIs musste ich dann nur noch ausfüllen, was passieren soll, wenn der Benutzer eine Abfrage ausführen möchte.

Sie können den Quellcode für das REST Book hier einsehen.

Für beide Notebooks war es großartig, die VS Code Notebook UI zu haben, um diese REPL-ähnlichen Erfahrungen zu schaffen. Sie müssen sich keine Sorgen um die Erstellung und Wartung Ihrer eigenen UI machen, sondern können sich einfach auf die Funktionalität konzentrieren.

Erstellen Sie Ihre eigene benutzerdefinierte Notebook-Erweiterung

Sehen Sie sich ein Coding-Tutorial an

Das VS Code-Team hat vor einigen Monaten einen Livestream über benutzerdefinierte Notebooks aufgenommen, in dem ich in einer Live-Coding-Demo gezeigt habe, wie es ist, eine benutzerdefinierte Notebook-Erweiterung zu erstellen. Sie können ihn auf YouTube ansehen: VS Code Notebooks: Ein tiefer Einblick. Einige der Notebook-APIs haben sich seit der Veröffentlichung des Videos geändert, aber die Prinzipien sind immer noch dieselben.

Für die aktuellsten und detailliertesten Informationen, wenn Sie bereit sind, Ihre eigene Notebook-Erweiterung zu erstellen, können Sie sich den Leitfaden für Notebook-Erweiterungsautoren ansehen.

Teilen Sie Ihre Ideen mit der Community

Wenn Sie kein Interesse daran haben, Ihre eigene Notebook-Erweiterung zu erstellen, aber Ideen für nützliche Anwendungen haben, ermutigen wir Sie, Notebook-Ideen an den VS Code-Twitter-Account, @code, zu twittern oder Issues im VS Code GitHub-Repository zu erstellen. Dies ermöglicht es der VS Code-Community, Ihre Notebook-Idee zu lesen und zu diskutieren und hoffentlich Leute zu inspirieren, Ihr Notebook Wirklichkeit werden zu lassen!

Die wenigen benutzerdefinierten Notebooks, die wir in diesem Blog behandelt haben, sind erst der Anfang! Wir freuen uns darauf zu sehen, welche benutzerdefinierten Notebook-Erfahrungen Sie inspirieren und erstellen werden!

Viel Spaß beim Programmieren!

Tanha Kabir (@_tanhakabir) und das VS Code-Team (@code)