ist jetzt verfügbar! Lesen Sie über die neuen Funktionen und Fehlerbehebungen vom November.

September 2022 (Version 1.72)

Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap

Update 1.72.1: Das Update behebt diese Sicherheitsprobleme.

Update 1.72.2: Das Update behebt diese Probleme.

Willkommen zur September 2022-Version von Visual Studio Code. Es gibt viele Updates in dieser Version, die Ihnen hoffentlich gefallen werden. Einige der wichtigsten Highlights sind:

Wenn Sie diese Release Notes online lesen möchten, gehen Sie zu Updates auf code.visualstudio.com.

Insiders: Möchten Sie neue Funktionen so schnell wie möglich ausprobieren? Sie können den nächtlichen Insiders-Build herunterladen und die neuesten Updates ausprobieren, sobald sie verfügbar sind.

Workbench

Symbolleistenelemente ausblenden

Sie können jetzt Elemente aus Symbolleisten ausblenden. Klicken Sie mit der rechten Maustaste auf ein beliebiges Element in einer Symbolleiste und wählen Sie den Befehl zum Ausblenden oder einen der Befehle zum Umschalten aus. Ausgeblendete Elemente werden in das Menü ... Weitere Aktionen verschoben und können von dort aufgerufen werden. Um ein Menü wiederherzustellen, klicken Sie mit der rechten Maustaste auf den Symbolleisten-Schaltflächenbereich und wählen Sie den Befehl Menü zurücksetzen. Um alle Menüs wiederherzustellen, führen Sie Alle Menüs zurücksetzen über die Befehlspalette aus (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

Im folgenden Video wird das Menü Dateianmerkungen der Erweiterung GitLens aus der Symbolleiste des Editors ausgeblendet und dann über Menü zurücksetzen wiederhergestellt.

Merge-Editor

Wählen Sie die Verwendung des 3-Wege-Merge-Editors aus

Nachdem wir das gesamte Feedback zum Merge-Editor, das wir erhalten haben, überprüft und die Erfahrung als Ganzes betrachtet haben, haben wir beschlossen, den 3-Wege-Merge-Editor nicht standardmäßig anzuzeigen (die Einstellung git.mergeEditor ist jetzt false), wenn Konflikte erkannt werden. Die Begründung für diese Entscheidung finden Sie in Issue #160806.

Für Dateien mit Konflikten können Benutzer jetzt Im Merge-Editor auflösen auswählen, um den 3-Wege-Merge-Editor zu öffnen.

A screenshot of a file with conflicts, showing the "Resolve in Merge Editor" button

CodeLens UI

Benutzerfeedback zeigte, dass Kontrollkästchen einige UX-Probleme aufwiesen. Die Kontrollkästchen waren nicht gut auffindbar und verursachten Verwirrung, da sie nicht alle möglichen Zustände richtig darstellten. In dieser Iteration haben wir auf die CodeLens UI umgestellt, die Textbeschriftungen verwendet (Eingehend akzeptieren, Aktuell akzeptieren, Beides akzeptieren).

Merge editor before with checkboxes and after with CodeLens

Wir werden dieses Design weiter verfeinern und das erhaltene Feedback genau beobachten.

Ergebnisdatei von Grund auf neu berechnet

In der letzten Iteration haben wir versucht, den Merge-Editor als alternative Ansicht einer Datei mit Konflikten zu gestalten. Anstatt Konfliktmarker anzuzeigen, zeigten separate Editor-Bereiche Details des Konflikts an. Dieser Entwurf hatte den Vorteil, dass das Öffnen des Merge-Editors die Datei auf der Festplatte nicht änderte und vom Benutzer vorgenommene Änderungen vor dem Öffnen des Merge-Editors beibehalten werden konnten. Leider war dies nicht nur verwirrend, sondern funktionierte auch nicht in allen Fällen, da unser Merge-Algorithmus und der Git-Merge-Algorithmus nicht perfekt übereinstimmten.

Mit dieser Version wird, wenn eine Datei mit Konfliktmarkern im Merge-Editor geöffnet wird, als erster Schritt unser Merge-Algorithmus verwendet, um die Ergebnisdatei neu zu berechnen, ohne Konfliktmarker einzufügen. Einseitige Konflikte werden automatisch aufgelöst und echte Konflikte werden auf den gemeinsamen Vorfahren beider Versionen zurückgesetzt und als unbehandelt markiert.

Basisansicht

Der Merge-Editor verfügt jetzt über eine separate Basisansicht, die verwendet werden kann, um jede Seite mit dem gemeinsamen Vorfahren zu vergleichen.

Verbesserungen des Suchfelds der Baumansicht

Sie können das Suchfeld der Baumansicht jetzt vertikal verschieben, um auf die dahinter liegenden UI-Elemente zuzugreifen. Drücken Sie ⌥⌘F (Windows, Linux Ctrl+Alt+F) in Baumansichten, um das Suchfeld anzuzeigen.

Tree view Find control supports vertical movement

Zusätzlich merkt sich das Suchfeld der Baumansicht den letzten Suchbegriff, wenn es wieder geöffnet wird.

Tree view Find control remembers last search text

Integrierter Vorab-Download für einige Audio- und Videodateien

VS Code unterstützt jetzt die Vorschau einiger Audio- und Videoformate.

Previewing an MP4 video in VS Code

Die folgenden Audioformate werden derzeit unterstützt:

  • WAV
  • MP3
  • Ogg
  • FLAC

Und die folgenden Videoformate können in der Vorschau angezeigt werden:

  • H.264
  • VP8

Beachten Sie bei Videodateien, dass sowohl das Video- als auch die Audiospurformate unterstützt werden müssen. Viele .mp4-Dateien verwenden beispielsweise H.264 für Video und AAC für Audio. VS Code kann den Videoteil der .mp4-Datei abspielen, aber da AAC-Audio nicht unterstützt wird, gibt es keinen Ton. Sie müssen MP3 für die Audiospur verwenden.

Inkrementelle Benennung deaktivieren

Sie können die inkrementelle Dateibenennung im Datei-Explorer jetzt mit dem neuen Wert disabled für die Einstellung explorer.incrementalNaming deaktivieren. Dieser Wert deaktiviert die Logik zur Änderung des Dateinamens beim Einfügen im Datei-Explorer. Wenn der Dateiname bereits vorhanden ist, werden Sie aufgefordert, die vorhandene Datei zu überschreiben, ähnlich wie bei den meisten nativen Explorer.

Warnung beim Bearbeiten im VS Code-Anwendungsordner

Beim Bearbeiten von Dateien im Anwendungsordner von VS Code wird nun eine Warnung im Editor angezeigt. Das versehentliche Ändern von Dateien im Anwendungsordner ist ein häufiger Fehler und normalerweise nicht beabsichtigt.

VS Code warns when editing its application folder files

Editor

Verbessertes Autoscroll-Verhalten

Beim Auswählen und Ziehen scrollte der Editor in einer Weise, die von der Bildrate (FPS) des Displays abhing, manchmal scrollte der Editor schnell, sobald die Maus die Kanten des Editors erreichte. Jetzt scrollt der Editor mit einer besser kontrollierbaren Geschwindigkeit von etwa einem Viewport pro Sekunde, wenn sich die Maus nahe den Kanten befindet, und schneller, wenn sich die Maus weiter vom Editor entfernt befindet, unabhängig von der FPS.

Im folgenden Video steigt die Scroll-Rate, wenn sich der Mauszeiger nach unten vom Editor wegbewegt.

Verbesserter Hover-Effekt

Der Hover-Effekt des Editors war sehr aggressiv beim Ausblenden, insbesondere wenn die Maus über einen leeren Bereich des Editors fuhr. Dies erschwerte den Zugriff auf einige der im Hover angezeigten Aktionen. Jetzt bleibt der Hover-Effekt sichtbar, solange sich die Maus in Richtung desselben bewegt. Die Einstellung "editor.hover.sticky": false setzt das vorherige Verhalten wiederher.

Im "Nachher"-Video rechts ist es viel einfacher, eine Schnellkorrektur aus dem Hover auszuwählen.

Neue Code Action-Gruppen

Im Code Action-Steuerelement gibt es zwei neue Gruppen: Inline und Move.

Diese Gruppen entsprechen den Code Action-Arten refactor.inline und refactor.move.

Neue Code Action-Farben

Sie werden vielleicht bemerken, dass das Code Action-Steuerelement in dieser Iteration auch etwas anders aussieht. Das Styling wurde aktualisiert, um geeignetere Themenfarben zu verwenden. Die größte Änderung ist, dass der Körper des Steuerelements nun editorWidget.*-Farben anstelle von menu.* verwendet.

Wir verfeinern diese Farben noch, lassen Sie uns also wissen, ob sie mit einem bestimmten Thema nicht gut funktionieren oder ob bestimmte Farb-Anpassungsoptionen fehlen.

Erweiterungen

Kürzlich aktualisierte Erweiterungen

VS Code zeigt jetzt Erweiterungen an, die in den letzten 7 Tagen aktualisiert wurden, in einem Abschnitt Kürzlich aktualisiert unter Updates in der Erweiterungsansicht an.

Recently Updated section in the Extensions view

Erweiterungen, die Aufmerksamkeit erfordern

VS Code zeigt jetzt Erweiterungen, die Aufmerksamkeit erfordern, sortiert am oberen Rand des Standardabschnitts Installiert in der Erweiterungsansicht an. Dies umfasst Erweiterungen, die ein ausstehendes Update haben oder aktualisiert/deaktiviert wurden und einen Neustart von VS Code erfordern.

Extensions requiring attention are displayed at the top of the Extensions view

Die Markierung auf dem Erweiterungssymbol in der Aktivitätsleiste zeigt nun die Anzahl der Erweiterungen an, die Aufmerksamkeit erfordern.

Extensions badge showing that four extensions require attention

Updates für eine Erweiterung ignorieren

Sie können jetzt Updates für eine Erweiterung ignorieren, indem Sie auf die Schaltfläche Updates ignorieren im Dropdown-Menü Update klicken. Dadurch wird die Erweiterung aus der Liste der zu beachtenden Erweiterungen entfernt.

Ignore Updates option in Extensions view context menu

Sie können diese Aktion rückgängig machen, indem Sie dieselbe Schaltfläche Updates ignorieren deaktivieren.

Checked Ignore Updates option in Extensions view context menu

Beachten Sie, dass die Installation einer bestimmten Version einer Erweiterung (über Andere Version installieren) auch Updates für diese Erweiterung ignoriert.

Sortierung installierter Erweiterungen

Sie können die Liste der installierten Erweiterungen jetzt nach Installationsanzahl, Bewertung, Name, Veröffentlichungsdatum und Aktualisierungsdatum sortieren.

Extensions view Sort By menu options

Suchen

Ergebnisse als Baumansicht anzeigen

Sie können Suchergebnisse jetzt in einer Baumansicht anzeigen! Wechseln Sie einfach zwischen Listen- und Baumansicht, indem Sie auf das Listen-/Baum-Symbol in der oberen Ecke der Suchansicht klicken.

Search results shown as a tree view

Thema: Night Owl Light (Vorschau auf vscode.dev)

Einstellungen für Dateidekorationen

In den Suchergebnissen können die Dateinamens-Markierungen und Farben, die den Dateistatus widerspiegeln, jetzt ein- und ausgeschaltet werden. Die Einstellungen sind Suche > Dekorationen: Markierungen (search.decorations.badges) und Suche > Dekorationen: Farben (search.decorations.colors).

Search results file decoration settings

Thema: Night Owl Light (Vorschau auf vscode.dev)

Quellcodeverwaltung

Verschachtelte Git-Repositories entdecken

Um eine lang gehegte Funktionsanforderung zu erfüllen, haben wir in diesem Meilenstein Änderungen an der Repository-Erkennung vorgenommen, um die Unterstützung für verschachtelte Git-Repositories hinzuzufügen. Abhängig vom Speicherort der verschachtelten Repositories müssen Sie möglicherweise die Einstellung git.repositoryScanMaxDepth ändern (der Standardwert ist 1 Ebene).

Unterstützung für SSH-Schlüssel mit Passphrase hinzufügen

Wenn ein SSH-Schlüssel mit Passphrase für Git-Vorgänge verwendet wird, zeigt VS Code jetzt das Schnelleingabefeld an, damit Sie die Passphrase für den SSH-Schlüssel eingeben können. Die Passphrase wird nicht zwischengespeichert und muss bei jedem Git-Vorgang erneut eingegeben werden.

Pull vor Checkout

In diesem Meilenstein haben wir eine neue Einstellung, git.pullBeforeCheckout, hinzugefügt, um den Prozess des Wechselns von Branches zu optimieren. Wenn diese Einstellung aktiviert ist und keine ausgehenden Commits vorhanden sind, wird vor dem Auschecken ein Pull vom Remote durchgeführt und der Branch als Fast-Forward aktualisiert.

Verbesserungen beim Abrufen von Repositories

Für Git-Repositories mit mehreren Remotes zeigt der Befehl zum Abrufen jetzt eine Schnellauswahl mit der Liste aller Remotes an. Benutzer können ein bestimmtes Remote zum Abrufen auswählen oder von allen Remotes abrufen.

Befehl "Merge abbrechen"

Es gibt einen neuen Befehl, Git: Merge abbrechen, um einen laufenden Merge-Vorgang abzubrechen.

Terminal

Schnellkorrekturen im Terminal

Wir beginnen mit der Einführung einer neuen Funktion, die durch Shell-Integration angetrieben wird und als Schnellkorrekturen bezeichnet wird. Diese Funktion verfügt über Unterstützung für Audio-Hinweise. Aktivieren Sie sie mit audioCues.terminalQuickFix für eine hörbare Anzeige, dass eine Korrektur verfügbar ist.

Eine Schnellkorrektur ist verfügbar, wenn ein Befehl einer Reihe von Aktionen zugeordnet ist, die der Benutzer wahrscheinlich ausführen wird, und kann über die gleiche Tastenkombination wie im Editor aktiviert werden Strg+. oder Cmd+..

Hier sind die anfänglich unterstützten Schnellkorrekturen:

Ähnlicher Git-Befehl

Wenn ein Git-Befehl falsch eingegeben wird, schlägt die Schnellkorrektur den ähnlichen Befehl vor.

Run: git status is suggested after git sttatus is mistyped

Git Upstream festlegen

Wenn git push ausgeführt wird und kein Upstream-Remote vorhanden ist, schlägt die Schnellkorrektur vor, mit den Upstream-Remote-Argumenten zu pushen.

Run: git push set upstream is suggested

Git PR erstellen

Wenn ein Branch zum ersten Mal zum Remote gepusht wird, schlägt die Schnellkorrektur vor, den Link zum Erstellen eines PR zu öffnen.

An open GitHub PR link action is offered

Freier Port

Wenn ein Server mit einem bereits belegten Port gestartet wird, bietet die Schnellkorrektur eine Aktion zum Beenden des Prozesses und Freigeben des Ports an.

A server launch fails with a port 3000 in use error. An action to free port 3000 is offered.

Verbesserungen der Shell-Integration

Folgende Verbesserungen an der Shell-Integration wurden vorgenommen:

  • Zuletzt ausgeführten Befehl ausführen und Zu letztem Verzeichnis wechseln löschen jetzt die Zeile, wenn sie Inhalt enthält (oder wenn sie nicht zuverlässig ermittelt werden kann).
  • Die Verwendung der Umgebungsvariablen $PREFIX im Bash-Skript wurde entfernt, da diese mit einigen Build-Tools in Konflikt geraten konnte.
  • Das Zsh-Skript wurde verfeinert, um einige Grenzfälle bezüglich $ZDOTDIR zu beheben.
  • Bessere Handhabung der Zsh-Shell-Integration auf Rechnern, die von mehreren Benutzern gemeinsam genutzt werden.

Hyperlink-Unterstützung

Hyperlinks, die von der Anwendung gesendet werden, die im Terminal ausgeführt wird, werden jetzt unterstützt. Diese ermöglichen die Anzeige einer Beschriftung, die auf eine URL verweist und mit einer gestrichelten Unterstreichung erscheint.

Hyperlinks appear in the terminal with dashed underlines, hovering the hyperlink reveals the URL

Hier ist ein Beispiel, wie Sie einen Link mit der Beschriftung "VS Code" erstellen können, der auf https://visualstudiocode.de verweist:

printf '\e]8;;https://visualstudiocode.de\e\\VS Code\e]8;;\e\\'

Oder allgemeiner:

\x1b]8;; <URL> \x1b\ <Label> \x1b]8;;\x1b\'

VT-Funktionsunterstützung

Diese Version bringt Unterstützung für die folgenden VT-Escape-Sequenzen:

  • DECRQM: ANSI- und DEC-Private-Mode-Reporting (CSI Ps $ p) - Diese Sequenz ermöglicht es Programmen, verschiedene Modi des Terminals abzufragen, wie z. B. Wraparound- oder Bracketed-Paste-Modi.
  • DECSCA: Schutzattribut (CSI Ps " q) - Dieses Attribut bestimmt, ob DECSED und DECSEL Inhalte löschen können.

Audio-Glocke

Die Audio-Glocke funktioniert jetzt im Terminal und kann über terminal.integrated.enableBell aktiviert werden.

Terminal-Dokumentation

Die Terminal-Dokumentation wurde umstrukturiert und in ein eigenes Inhaltsverzeichnis auf der VS Code-Website verschoben.

Es gibt jetzt Themen, die sich speziell mit Folgendem befassen:

  • Terminal-Grundlagen - Machen Sie sich schnell mit dem integrierten Terminal von VS Code vertraut.
  • Terminal-Profile - Erfahren Sie, wie Sie Terminals über Profile anpassen.
  • Shell-Integration - VS Code kann Funktionen wie Befehlsstatus, Verlauf und schnelle Navigation bereitstellen.
  • Erscheinungsbild - Ändern Sie die Terminaltext- und Cursor-Stile und -Farben.
  • Erweitert - Erweiterte Unterstützung für benutzerdefinierte Tastenkombinationen sowie Unicode- und Emoji-Zeichen.

Hoffentlich können Sie die richtige Dokumentation leicht finden, wenn Sie sie benötigen.

Aufgaben

Task-Einträge zum Ausführen anheften

Tasks können in der Liste Tasks: Task ausführen angeheftet werden, um einen schnelleren und einfacheren Zugriff zu ermöglichen.

Pinned items are the top category in the Run Task list

Sound bei Aufgabenerledigung

Tasks spielen beim Beenden einen Ton ab, um Multitasking zu ermöglichen und die Zugänglichkeit zu verbessern. Konfigurieren Sie den Audio-Hinweis über die Einstellung audioCues.taskCompleted.

Sprachen

Markdown-Link-Validierung

Beim Arbeiten mit Markdown ist es einfach, versehentlich einen ungültigen Dateilink oder Bildverweis einzufügen. Vielleicht haben Sie vergessen, dass der Dateiname ein - (Bindestrich) anstelle eines _ (Unterstrich) verwendet hat, oder vielleicht wurde die Datei, auf die Sie verlinken, in ein anderes Verzeichnis verschoben. Oft fangen Sie diese Fehler erst nach der Anzeige der Markdown-Vorschau oder nach der Veröffentlichung auf. Die neue Markdown-Link-Validierung von VS Code kann helfen, diese Fehler abzufangen.

Um zu beginnen, setzen Sie "markdown.validate.enabled": true. VS Code analysiert nun Markdown-Links zu Kopfzeilen, Bildern und anderen lokalen Dateien. Ungültige Links werden als Warnungen oder Fehler gemeldet.

A warning shown in the editor when linking to a file that does not exist

VS Code kann sogar ungültige Links zu bestimmten Kopfzeilen in anderen Markdown-Dateien erkennen!

Es gibt einige Einstellungen, die Sie zur Anpassung der Link-Validierung verwenden können:

  • markdown.validate.fileLinks.enabled - Validierung von Links zu lokalen Dateien aktivieren/deaktivieren: [Link](/pfad/zu/datei.md)
  • markdown.validate.fragmentLinks.enabled - Validierung von Links zu Kopfzeilen in der aktuellen Datei aktivieren/deaktivieren: [Link](#_eine-kopfzeile)
  • markdown.validate.fileLinks.markdownFragmentLinks - Validierung von Links zu Kopfzeilen in anderen Markdown-Dateien aktivieren/deaktivieren: [Link](andere-datei.md#eine-kopfzeile)
  • markdown.validate.referenceLinks.enabled - Validierung von Referenzlinks aktivieren/deaktivieren: [Link][ref].
  • markdown.validate.ignoredLinks - Eine Liste von Link-Globs, die von der Validierung übersprungen werden. Dies ist nützlich, wenn Sie auf Dateien verlinken, die auf der Festplatte nicht existieren, aber existieren, sobald das Markdown veröffentlicht wurde.

Probieren Sie es aus und lassen Sie uns wissen, was Sie von der neuen Funktion halten!

In Link-Definition extrahieren für Markdown

Referenzlinks erleichtern die mehrfache Verwendung desselben Links in Ihrer Markdown-Quelle.

This [link][example-link] and [this link][example-link] both point to the same place!

[example-link]: http://example.com

Dies ist praktisch, da Sie beide Links durch Ändern einer Stelle in Ihrer Datei aktualisieren können.

Die neue Refaktorierung In Link-Definition extrahieren hilft Ihnen, einen vorhandenen Markdown-Link in eine Link-Definition und einen Referenzlink umzuwandeln. Diese Refaktorierung konvertiert alle Vorkommen eines Links im aktuellen Dokument. Zum Beispiel für das Markdown-Dokument:

[Markdown](https://daringfireball.net/projects/markdown/) and you: Adventures in [Markdown linking](https://daringfireball.net/projects/markdown/)!

Wenn Sie In Link-Definition extrahieren auf einen der https://daringfireball.net/projects/markdown/-Links anwenden, erhalten Sie:

[Markdown][md] and you: Adventures in [Markdown linking][md]!

[md]: https://daringfireball.net/projects/markdown/

Nachdem die Refaktorierung ausgeführt wurde, werden Sie von VS Code nach dem Namen der Link-Definition gefragt. Im obigen Beispiel haben wir md eingegeben.

Link-Definitionen in Markdown organisieren

Die neue Code Action Link-Definitionen organisieren (source.organizeLinkDefinitions) für Markdown-Dateien gruppiert alle Link-Definitionen am Ende der Datei, sortiert sie alphabetisch und entfernt ungenutzte. Dies kann über den Befehl Source Action ausgeführt werden.

Zum Beispiel im Markdown-Quelltext:

Some [link][example] and an image:

![An image of a cat][cat-gif]

[example]: http://example.com
[cat-gif]: /keyboard-cat.gif
[some unused link]: http://example.com/file2

Wenn Sie Link-Definitionen organisieren ausführen, wird Folgendes geschehen:

Some [link][example] and an image:

![An image of a cat][cat-gif]

[cat-gif]: /keyboard-cat.gif
[example]: http://example.com

Beachten Sie, wie die ungenutzte Definition some unused link entfernt wurde und die verbleibenden Definitionen alphabetisch sortiert wurden.

CSS / LESS / SCSS

Die CSS-Sprachunterstützung versteht nun die At-Regeln @property und @layer.

Notebooks

Notebook-JavaScript-Ausgabe wird nun als Modul ausgewertet

JavaScript-Ausgaben in Notebooks werden nun als Modul behandelt. Das bedeutet, dass Variablen, die innerhalb der Ausgabe deklariert werden, nicht mehr in andere Ausgaben auslaufen (und im Falle von const-Variablen möglicherweise sogar verhindern, dass andere Ausgaben mit widersprüchlichen Variablennamen ausgeführt werden).

Das bedeutet auch, dass Sie jetzt import innerhalb von JavaScript-Ausgaben verwenden können.

%%javascript
import { myFunction } from './myModules.js';

console.log(myFunction());

HTML-Kopfzeilen werden in der Notebook-Gliederung unterstützt

HTML-Kopfzeilen in Markdown-Zellen können jetzt erkannt und in der Notebook-Ansicht Gliederung angezeigt werden.

HTML headers in notebook Markdown cells

VS Code für das Web

'code' in der Omnibox Ihres Browsers

Es gibt jetzt eine Chrome/Edge-Browsererweiterung, die es einfacher macht, Ihre GitHub-Repositories in vscode.dev zu öffnen.

Erste Schritte

  1. Installieren Sie die Erweiterung aus dem Chrome Web Store.
  2. Geben Sie code in die Suchleiste Ihres Browsers ein, um die Omnibox zu aktivieren.
  3. Suchen Sie ein GitHub-Repository nach Namen und drücken Sie Enter. Vorschläge werden von Ihrem Browser-Suchverlauf ausgefüllt. Wenn das gewünschte Repo nicht angezeigt wird, können Sie auch den vollständigen Namen <owner>/<repo> eingeben, um es zu öffnen, z. B. microsoft/vscode.

Im folgenden Video öffnet der Benutzer das Repository microsoft/vscode in vscode.dev, indem er code vscode eingibt.

Diese Erweiterung wurde mit großem Dank von der Goto GitHub Repo Chrome-Erweiterung inspiriert, die von Pine Wu, einem ehemaligen VS Code-Teammitglied, erstellt wurde.

Nehmen Sie Ihre Änderungen mit, wenn Sie die Entwicklungsumgebungen wechseln

Wenn Sie ein GitHub- oder Azure Repos-Repository wie https://vscode.dev/github/microsoft/vscode durchsuchen, können Sie den Befehl Weiterarbeiten an verwenden, um eine andere Entwicklungsumgebung für Ihr Repository auszuwählen.

Zuvor mussten Sie Ihre ungespeicherten Änderungen in Ihrem virtuellen Arbeitsbereich auf GitHub oder Azure Repos pushen, um sie an einem anderen Ort anzuzeigen. In diesem Meilenstein haben wir die Edit Sessions-Integration in die Funktion Weiterarbeiten an integriert, sodass Ihre ungespeicherten Änderungen automatisch mit Ihnen zu Ihrer Zielentwicklungsumgebung, wie z. B. einem GitHub Codespace, mitgenommen werden.

Im folgenden Video werden die Änderungen des Benutzers an einer JavaScript-Datei, die bei der Verwendung von VS Code für das Web vorgenommen wurden, übernommen, wenn er einen neuen GitHub Codespace erstellt und zu diesem wechselt.

Mit dieser Version haben Sie beim ersten Mal, wenn Sie Weiterarbeiten an mit ungespeicherten Änderungen verwenden, die Option, Ihre Bearbeitungen mit Edit Sessions in Ihre ausgewählte Entwicklungsumgebung zu übertragen. Diese verwenden einen VS Code-Dienst, um Ihre ausstehenden Änderungen zu speichern. Diese Änderungen werden aus unserem Dienst gelöscht, sobald sie auf Ihre Zielentwicklungsumgebung angewendet wurden. Wenn Sie ohne Ihre ungespeicherten Änderungen fortfahren möchten, können Sie diese Präferenz jederzeit später ändern, indem Sie die Einstellung "workbench.editSessions.continueOn": "prompt" konfigurieren.

Prompt to bring working changes with you when using Continue Working On

Wenn Sie VS Code für das Web verwenden, werden Ihre ungespeicherten Änderungen mit Ihnen mitgenommen, wenn Sie Weiterarbeiten an in

  • Eine neue Cloud-basierte Umgebung in GitHub Codespaces
  • Ein neuer lokaler Klon Ihres GitHub-Repositorys
  • Eine lokale VS Code-Instanz mit demselben virtuellen GitHub-Repository

Wenn Sie das Desktop-VS Code mit der Erweiterung Remote Repositories verwenden, werden Ihre ungespeicherten Änderungen mit Ihnen mitgenommen, wenn Sie Weiterarbeiten an in

  • Eine Cloud-basierte Umgebung in GitHub Codespaces (verfügbar über die GitHub Codespaces-Erweiterung)
  • Ein neuer lokaler Klon Ihres GitHub-Repositorys
  • Ein neuer Klon Ihres GitHub-Repositorys in einem Container-Volume (verfügbar über die Dev Containers-Erweiterung)
  • https://vscode.dev
  • Ein vorhandener lokaler Ordner, der einen Klon Ihres Repositorys enthält

Problem-Berichterstattung

Schwellenwert für Probleme auf 7500 Zeichen erhöht

Bei der Verwendung des integrierten Problem-Reporters zur Meldung eines Problems mit VS Code oder einer Erweiterung gibt es eine Begrenzung für die Anzahl der Zeichen in der URL, die zum Öffnen des Problems auf github.com verwendet wird. Wenn Sie dieses Limit erreichen, sehen Sie eine Meldung im Problemkörper, die besagt Wir haben die benötigten Daten in Ihre Zwischenablage geschrieben, da sie zu groß zum Senden waren. Bitte fügen Sie ein.. Leider bemerken einige Benutzer die Meldung nicht und vergessen, die Daten in den Problemkörper einzufügen.

In diesem Meilenstein haben wir den Schwellenwert auf 7500 Zeichen erhöht. Das liegt daran, dass

  1. Bestimmte Browser, die eine harte Begrenzung für die Anzahl der Zeichen in einer URL haben, werden nicht mehr unterstützt (EOL).
  2. GitHub hat seine eigene Begrenzung für die Anzahl der Zeichen in einer URL.

Dies erhöht die Anzahl der Zeichen in der URL fast um das Dreifache, was für die meisten Benutzer ausreichend sein sollte und die Zwischenablagen-Nachricht seltener angezeigt wird.

Problem-Reporter verwendet mit dem Editor für laufende Erweiterungen

Wenn Sie den Editor Laufende Erweiterungen über den Befehl Entwickler: Laufende Erweiterungen anzeigen öffnen und die Schaltfläche Problem melden auswählen, wird der integrierte Problem-Reporter angezeigt. Zuvor führte dies Sie zu einem GitHub-Problem und bat Sie, einzufügen, und es wurden viele unnötige und qualitativ schlechte Probleme in Erweiterungs-Repositories erstellt. Die Schaltfläche Problem melden von Erweiterungen führt jetzt über den integrierten Problem-Reporter und ermöglicht es Benutzern, qualitativ hochwertige Erweiterungsprobleme einzureichen.

Beiträge zu Erweiterungen

Remote-Entwicklung

Die Remote Development-Erweiterungen ermöglichen es Ihnen, einen Entwicklungcontainer, eine Remote-Maschine oder das Windows Subsystem für Linux (WSL) als vollwertige Entwicklungsumgebung zu verwenden.

Wir haben Ihr Feedback zur Benennung der Erweiterungen Remote - WSL und Remote - Container gehört. Wir beabsichtigten, dass Remote in ihren Namen darauf hinweist, dass Sie in einer "Remote"- oder "separaten" WSL-Distribution oder einem Entwicklungcontainer entwickeln, anstatt in einer traditionellen lokalen Entwicklungsumgebung. Dies ist jedoch eine andere Verwendung von "remote" als die, die viele Leute verwenden, und es könnte zu Verwirrung führen (z. B. befindet sich der Entwicklungcontainer auf meinem Rechner?).

Daher haben wir die Benennung und die In-Product-Befehle in diesen Erweiterungen aktualisiert, um sie klarer zu gestalten. Wir benennen sie in die WSL und Dev Containers um. Links wie die Erweiterungs-ID im Marketplace und in der Dokumentation bleiben gleich, sodass Sie keine Unterbrechungen bei Ihrer aktuellen Verwendung dieser beiden Erweiterungen feststellen sollten.

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

Neben der Umbenennung wurde auch an Funktionen und Fehlerbehebungen dieser Erweiterungen weitergearbeitet. Mehr erfahren Sie in den Remote Development Release Notes.

Dev Container Features

Dev Container Features ermöglichen es Ihnen, vordefinierte Funktionen einfach zu Ihren Dev Containern hinzuzufügen. Ob es sich um Tools wie Git oder Docker handelt oder um Unterstützung für Programmiersprachen wie Go oder Java, Sie können die Liste der verfügbaren Features durchsehen und sie zu Ihrer devcontainer.json hinzufügen. Sie können auch eigene Features erstellen, um sie zu veröffentlichen und mit anderen zu teilen, indem Sie die Feature-Vorlage verwenden.

GitHub Pull Requests und Issues

Es wurden weitere Fortschritte bei der GitHub Pull Requests and Issues-Erweiterung erzielt, die es Ihnen ermöglicht, Pull-Anfragen und Issues zu bearbeiten, zu erstellen und zu verwalten. Highlights dieser Version sind:

  • Verbesserte Unterstützung für GitHub Enterprise Server. Dies beinhaltet:
    • PAT-lose Authentifizierung dank des integrierten GitHub Enterprise Server-Authentifizierungsanbieters von VS Code.
    • Automatische Erkennung, wenn Sie einen Ordner mit einem Enterprise-Repository öffnen, und ein On-Ramp zum Einrichten.
    • Fehlerbehebungen für GitHub Enterprise Server-Bugs.
  • Kontrollkästchen zum Markieren von Dateien als angezeigt.

Schauen Sie sich das Changelog für die Version 0.52.0 der Erweiterung an, um die anderen Highlights zu sehen.

GitHub Issue Notebooks

Workspace-Bearbeitungen

Die Erweiterung GitHub Issue Notebooks präsentiert die Notebook-API und erwies sich als ziemlich nützlich. In diesem Sinne haben wir die neuesten Verbesserungen der Workspace-Edit-API übernommen. Es gibt neue Code Actions, die:

  • Zellen in neue Notebooks verschieben/kopieren.
  • Zellen mithilfe von ODER-Anweisungen aufteilen.
  • Qualifizierte Werte wie label:bug mithilfe von Snippet-Bearbeitungen in Variablen extrahieren.
  • Snippet-basierte Schnellkorrekturen für Fehler bei Wertesätzen.

Move cell into new notebook and Quick Fix for value set violation

Lokalisierung

Die Erweiterung ist jetzt vollständig in den 13 von VS Code unterstützten Sprachen lokalisiert. Sie ist auch die erste Erweiterung, die mithilfe der neuen Lokalisierungs-API lokalisiert wurde, was bedeutet, dass die Lokalisierung sowohl auf dem Desktop als auch im Web funktioniert.

Jupyter

Zell-Tags und Diashow-Bearbeitungsunterstützung

Wir können jetzt Zell-Tags und Diashow-Typen direkt im Notebook-Editor bearbeiten, ohne das JSON-Format des Dokuments öffnen zu müssen.

Dies ermöglicht uns, die Notebooks für papermill zu parametrisieren oder die Notebooks für nbconvert anzupassen.

Edit Jupyter notebook cell tags

Wir können jetzt auch die Diashow-Typen von Notebook-Zellen direkt über Befehle aktualisieren, um die Notebooks für Präsentationen in Folien umzuwandeln.

Edit Jupyter notebook slideshow

Beide obigen Beispiele verwenden die Notebook Workspace Edit API zur Bearbeitung von Zell-Metadaten. Wenn Sie daran interessiert sind, wie Sie die Bearbeitung anderer benutzerdefinierter Zell-Metadaten unterstützen können, erfahren Sie mehr in den GitHub-Repositories (cell-tags, slideshow).

Verbesserte Befehlsinteraktion für das interaktive Fenster

Der Befehl interactive.input.focus gibt nun den Fokus auf das Eingabefeld des zuletzt verwendeten interaktiven Fensters. Im kurzen Video unten werden die Befehle mit benutzerdefinierten Tastenkombinationen verwendet.

Interactive Window navigation using keyboard shortcuts

Die Notebook-Befehle Zelle löschen sind für Zellen des interaktiven Fensters aktiviert und können nun rückgängig gemacht werden.

Zellenfaltung in Python-Dateien

"Zellen" in einer Python-Datei, die mit # %%-Markierungen gekennzeichnet sind, können nun im Editor gefaltet werden.

Authentifizierungsunterstützung für GitHub Enterprise Server

Bisher mussten Benutzer von GitHub Enterprise Server manuell ein Personal Access Token (PAT) erstellen, um sich in VS Code bei GitHub Enterprise Server anzumelden (z. B. für die Verwendung mit der GitHub Pull Requests and Issues-Erweiterung). Dies war ein umständlicher Prozess, bei dem Benutzer VS Code verlassen mussten, um ein PAT zu erstellen, sicherstellen mussten, dass es mit den richtigen Berechtigungen erstellt wurde, es kopieren und wieder in VS Code einfügen.

Nicht mehr. Jetzt ist der GitHub Enterprise Server-Anmeldeflow identisch mit dem github.com-Anmeldeflow, und Benutzer können sich bei GitHub Enterprise Server anmelden, ohne ein PAT erstellen zu müssen. Um diese Erfahrung in Aktion zu sehen, können Sie die Erweiterung GitHub Pull Requests and Issues aus dem Marketplace beziehen, die Einstellung github-enterprise.uri auf Ihre GitHub Enterprise Server-URI setzen und die Erweiterung ausprobieren. Hier ist ein Video, das die neue Erfahrung demonstriert.

Thema: Panda Theme (Vorschau auf vscode.dev)

Python

Befehl "Umgebung erstellen"

Ein neuer Befehl Umgebung erstellen wurde hinzugefügt, der für Python-Benutzer in VS Code automatisch eine virtuelle Umgebung oder eine Conda-Umgebung erstellt. Benutzer können den Befehl über die Befehlspalette auslösen, auswählen, ob sie eine neue virtuelle Umgebung mit venv oder eine Conda-Umgebung erstellen möchten, und schließlich ihren gewünschten Interpreter für ihr Projekt auswählen. Der Befehl installiert auch notwendige Pakete, die in einer requirements.txt-Datei in ihrem Projektordner aufgeführt sind. Wir hoffen, dass diese neue Funktion den Prozess der Umgebungs Erstellung vereinfacht und Benutzer dazu ermutigt, Umgebungen für bewährte Praktiken beim Programmieren zu nutzen.

Create new virtual environment with Create Environment command

Neue Umgebungs-API für Erweiterungsautoren

Die Python-API bietet nun eine Möglichkeit für Erweiterungen, mit Python-Umgebungen zu arbeiten, die auf dem Computer des Benutzers verfügbar sind und von der Python-Erweiterung gefunden werden. Erweiterungen können sie auch verwenden, um auf den ausgewählten Umgebungspfad zuzugreifen, der von der Python-Erweiterung zum Ausführen von Skripten verwendet wird, oder um ihn auf ihre bevorzugte Umgebung zu aktualisieren.

Geben Sie uns gerne Ihr Feedback in Issue #18888. Beachten Sie, dass die API noch nicht endgültig ist und sich daher ohne Rückwärtskompatibilität ändern kann, basierend auf dem Feedback.

Python-Erweiterungsvorlage

Die Python-Erweiterungsvorlage hilft Ihnen beim Erstellen einer Visual Studio Code-Erweiterung für Ihr bevorzugtes Python-Tool, wie z. B. Linter, Formatter oder Code-Analyse-Utilities. Die Vorlage bietet Ihnen die grundlegenden Bausteine, die Sie zum Erstellen einer Erweiterung benötigen, die Ihr Tool in VS Code integriert.

Vorschau-Funktionen

Einstellungsprofile

Wir haben in den letzten Monaten daran gearbeitet, Einstellungen-Profile in VS Code zu unterstützen, was eine der beliebtesten Anfragen der Community ist. Diese Funktion ist als Vorschau über die Einstellung workbench.experimental.settingsProfiles.enabled verfügbar. Probieren Sie sie aus und geben Sie uns Feedback, indem Sie Probleme im vscode-Repository erstellen oder in Issue #116740 kommentieren.

Indikator für Einstellungsprofile

VS Code zeigt unten in der Aktivitätsleiste einen Indikator für Einstellungsprofile an. Standardmäßig werden die ersten beiden Zeichen des Profilnamens im Indikator angezeigt. Sie können den Kurznamen auch in beliebige zwei Zeichen oder ein Emoji oder ein Codicon anpassen. Ein Codicon kann mit der Syntax $(codicon-id) referenziert werden.

Settings Profiles indicator

Beim Klicken auf diesen Indikator wird ein Menü mit der Option Kurzen Namen ändern angezeigt.

Settings Profiles menu

Synchronisierung von Einstellungsprofilen

VS Code unterstützt nun die Synchronisierung von Einstellungsprofilen über Ihre VS Code-Instanzen hinweg.

Hinweis: Diese Funktion ist derzeit nur in der Insiders-Version von VS Code verfügbar.

WebAssembly und Python-Ausführung im Web

In den letzten Monaten haben wir daran gearbeitet, WebAssembly (WASM) in VS Code zu integrieren. Um die Unterstützung zu ermöglichen, haben wir an zwei Dingen gearbeitet:

Der folgende Screenshot zeigt die Ausführung eines Hello World-Programms.

Execute Python file in VS Code for the Web

Sie können auch eine Python REPL mit dem Befehl Python WASM: REPL starten starten.

Python REPL running in VS Code for the Web

Bitte beachten Sie, dass sowohl die Bibliotheken als auch die Erweiterung sich in der Entwicklung befinden und als Vorschauen bereitgestellt werden. Es gibt Einschränkungen im WebAssembly-Python-Interpreter sowie in VS Code selbst. Wichtige Einschränkungen im Interpreter sind:

  • Keine Pip-Unterstützung.
  • Keine Socket-Unterstützung.
  • Keine Thread-Unterstützung. Infolgedessen gibt es keine asynchrone Unterstützung.

Es gibt jedoch Unterstützung für die Erstellung Ihrer eigenen Python-Umgebung, einschließlich Quellrad-Python-Paketen. Weitere Informationen finden Sie in der README der Erweiterung.

Einschränkungen in VS Code sind:

  • Keine Debug-Unterstützung. Sie können nur eine Python-Datei ausführen.
  • Keine Unterstützung für native Python-Module.

Aber bleiben Sie dran. Wir haben Pläne, einige dieser Einschränkungen aufzuheben.

Erweiterungs-Authoring

Erweiterungsdebug in einer sauberen Umgebung

Beim Debuggen einer Erweiterung gab es immer das Problem, dass die Erweiterung in der Entwicklungsumgebung (Benutzereinstellungen und installierte Erweiterungen) des Autors der Erweiterung lief und nicht in einer Umgebung, die für den Zielbenutzer der Erweiterung geeigneter war.

Mit der kürzlich eingeführten "Profile"-Funktion ist es nun möglich, die zu entwickelnde Erweiterung in einer anderen Umgebung auszuführen, indem ein Profil in der Debug-Konfiguration der Erweiterung angegeben wird. Aktivieren Sie die Einstellung workbench.experimental.settingsProfiles.enabled, um die Profile-Funktion zu aktivieren.

Zwei Szenarien werden unterstützt:

  • Debuggen in einer sauberen Umgebung durch Verwendung eines unbenannten "leeren" Profils, das automatisch gelöscht wird, wenn das Debuggen der Erweiterung beendet wurde.
  • Debuggen in einer kontrollierten Umgebung durch Verwendung eines benannten Profils, das speziell für die zu entwickelnde Erweiterung erstellt wurde und spezifische Benutzereinstellungen und Erweiterungen enthält.

Diese Debug-Konfiguration zeigt, wie in einer sauberen Umgebung mit dem Schalter --profile-temp debuggt wird.

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile-temp", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

Und hier ist eine Debug-Konfiguration für das Debuggen in einer kontrollierten Umgebung, die ein zuvor erstelltes Profil namens "extensionContext" verwendet.

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile=extensionContext", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

Beachten Sie, dass bei der Fehlerbehebung einer Erweiterung an einem entfernten Speicherort (über die Remote Development Erweiterungen Dev Containers, SSH oder WSL) die Verwendung des --profile-temp-Flags zu dieser Statusmeldung führt.

Disconnected Status bar message

Dies ist erwartet, da das temporäre Profil keine Erweiterungen enthält, was bedeutet, dass die Remote Development-Erweiterungen fehlen. Für Remote-Szenarien wird empfohlen, ein leeres benanntes Profil zu erstellen, die Remote Development-Erweiterungen hinzuzufügen und dann die Befehlszeilenoption --profile=.... zu verwenden.

Verbesserte APIs für die Bearbeitung von Arbeitsbereichen

Bearbeiten von Notebooks mit WorkspaceEdit

Arbeitsbereichsedits können nun Notebooks mit vscode.NotebookEdit modifizieren. Die Klasse vscode.NotebookEdit enthält statische Factory-Funktionen zum Erstellen von Edits, die Zellen in einem Notebook einfügen, ersetzen und löschen.

const currentNotebook = vscode.window.activeNotebookEditor?.notebook;
if (currentNotebook) {
  const edit = new vscode.WorkspaceEdit();

  // Use .set to add one or more edits to the notebook
  edit.set(currentNotebook.uri, [
    // Create an edit that inserts one or more cells after the first cell in the notebook
    vscode.NotebookEdit.insertCells(/* index */ 1, [
      // ... new notebook cell data
    ])

    // Additional notebook edits...
  ]);

  await vscode.workspace.applyEdit(edit);
}

Durchführen von Snippet-Edits mit WorkspaceEdit

Der neue Typ SnippetTextEdit ermöglicht es Erweiterungen, Snippet-Edits mit WorkspaceEdit durchzuführen. Snippet-Edits sind ähnlich wie reguläre Text-Edits, ermöglichen dem Benutzer jedoch, durch Platzhalter zu tabulieren, Variablen einzufügen, aus Auswahl-Elementen auszuwählen usw. Erfahren Sie mehr über Snippets in diesem Leitfaden.

Beachten Sie, dass Snippet-Edits einen Code- oder Notebook-Editor erfordern und Snippet-Edits nur für einen einzelnen Editor unterstützen können, andernfalls verhalten sie sich wie reguläre Text-Edits.

Wir glauben, dass die Kombination von Snippet-Edits und Workspace-Edits neue und nahtlosere Code-Aktionen und Refactorings ermöglicht, wie das Beispiel aus der GitHub Issue Notebooks-Erweiterung unten.

Erstellen von Dateien mit Inhalt mit WorkspaceEdit

Sie können nun den Inhalt beim Erstellen von Dateien mit WorkspaceEdit angeben. Übergeben Sie dazu den Inhalt mit seinem Options-Bag.

const edit = new vscode.WorkspaceEdit();
edit.createFile(newFileUri, { contents: new Unit8Array([1, 2, 3]) });

await vscode.workspace.applyEdit(edit);

Beigesteuerte Kontextmenüs für Webviews

Die neue API für Kontextmenüs von Webviews erleichtert es fortgeschrittenen Webviews, das Kontextmenü anzupassen, das angezeigt wird, wenn ein Benutzer innerhalb eines Webviews mit der rechten Maustaste klickt. Dieser neue Beitrags-Punkt verwendet die normalen Kontextmenüs von VS Code, sodass benutzerdefinierte Menüs nahtlos in den Rest des Editors passen. Webviews können auch benutzerdefinierte Kontextmenüs für verschiedene Abschnitte des Webviews anzeigen.

Um ein neues Kontextmenü-Element zu Ihrer Webview hinzuzufügen, fügen Sie zunächst einen neuen Eintrag in menus unter dem neuen Abschnitt webview/context hinzu. Jede Beitrags-Funktion nimmt einen command (woher auch der Titel des Elements stammt) und eine when-Klausel entgegen. Die when-Klausel sollte webviewId == 'YOUR_WEBVIEW_VIEW_TYPE' enthalten, um sicherzustellen, dass die Kontextmenüs nur für die Webviews Ihrer Erweiterung gelten.

"contributes": {
  "menus": {
    "webview/context": [
      {
        "command": "catCoding.yarn",
        "when": "webviewId == 'catCoding'"
      },
      {
        "command": "catCoding.insertLion",
        "when": "webviewId == 'catCoding' && webviewSection == 'editor'"
      }
    ]
  },
  "commands": [
    {
      "command": "catCoding.yarn",
      "title": "Yarn 🧶",
      "category": "Cat Coding"
    },
    {
      "command": "catCoding.insertLion",
      "title": "Insert 🦁",
      "category": "Cat Coding"
    },
    ...
  ]
}

Innerhalb des Webviews können Sie auch die Kontexte für bestimmte Bereiche des HTML mit dem data-vscode-context Datenattribut (oder in JavaScript mit dataset.vscodeContext) festlegen. Der Wert von data-vscode-context ist ein JSON-Objekt, das die Kontexte angibt, die gesetzt werden, wenn der Benutzer auf das Element klickt. Der endgültige Kontext wird ermittelt, indem vom Dokument-Root zum angeklickten Element gegangen wird.

Betrachten Sie zum Beispiel dieses HTML:

<div class="main" data-vscode-context='{"webviewSection": "main", "mouseCount": 4}'>
  <h1>Cat Coding</h1>

  <textarea data-vscode-context='{"webviewSection": "editor", "preventDefaultContextMenuItems": true}'></textarea>
</div>

Wenn der Benutzer auf das textarea klickt, werden die folgenden Kontexte gesetzt:

  • webviewSection == 'editor' - Dies überschreibt webviewSection vom übergeordneten Element.
  • mouseCount == 4 - Dies wird vom übergeordneten Element geerbt.
  • preventDefaultContextMenuItems == true - Dies ist ein spezieller Kontext, der die Kopier- und Einfügeeinträge ausblendet, die VS Code normalerweise zu Webview-Kontextmenüs hinzufügt.

Wenn der Benutzer mit der rechten Maustaste in den <textarea> klickt, sieht er:

Custom context menus showing in a webview

Neue Themensvariable für aktives Thema in Webviews

Das neue Datenattribut data-vscode-theme-id in Webviews speichert die ID des aktuell aktiven Themas. Dies ersetzt das jetzt veraltete Attribut data-vscode-theme-name, das den vollständigen Namen des Themas verfolgte (und möglicherweise auch lokalisiert war).

body[data-vscode-theme-id="One Dark Pro"] {
    background: hotpink;
}

Wenn Sie data-vscode-theme-name in Ihrer Webview verwendet haben, migrieren Sie zum neuen Attribut data-vscode-theme-id.

Asynchrone Notebook-Renderer

Die Notebook-Renderer-API unterstützt nun Notebook-Renderer, die asynchron sind, besser. Während dies zuvor implizit unterstützt wurde, kann renderOutputItem nun ein Promise zurückgeben, um anzuzeigen, dass das Ausgabe-Element gerendert wird. Der Funktion renderOutputItem wird nun auch ein AbortSignal übergeben, das abgebrochen wird, wenn das Rendering abgebrochen wird.

renderOutputItem(outputItem: OutputItem, element: HTMLElement, signal: AbortSignal): void | Promise<void>;

Wenn Ihr Renderer asynchrone Arbeiten durchführt, übernehmen Sie bitte diese API-Updates, damit VS Code Ihren Renderer besser unterstützen kann.

Code Action-Kind "refactor.move"

Das neue Code Action-Kind refactor.move kann für Refactorings verwendet werden, die Code verschieben (z. B. ein Symbol in eine neue Datei verschieben oder Code innerhalb einer Datei neu anordnen).

Während Erweiterungen zuvor Code Actions vom Typ refactor.move erstellen konnten, ist diese Art nun offiziell dokumentiert und wird von der neuen Code Action-Steuerung unterstützt.

Ausgewählte Baum-Elemente an view/title-Aktionen übergeben

Befehle, die zu Menüs vom Typ view/title beigetragen werden, erhalten zwei Argumente: das erste ist der fokussierte Baumknoten und das zweite sind alle ausgewählten Elemente im Baum.

Tree View initialSize-Beitragsfinalisierung

Erweiterungen, die Ansichten in package.json beitragen, können die Eigenschaft initialSize verwenden, um die anfängliche Größe ihrer Ansichten festzulegen. initialSize funktioniert ähnlich wie flex-grow in CSS.

Es gibt einige Einschränkungen, wann initialSize angewendet wird:

  • Es ist nur eine anfängliche Größe. Sobald eine Ansicht gerendert wurde, wird initialSize nicht erneut angewendet.
  • Es wird nur angewendet, wenn die Erweiterung sowohl die Ansicht als auch den Ansichtscontainer besitzt.

Tree View Badge-Finalisierung

TreeView hat eine optionale Eigenschaft viewBadge, mit der eine Zahlen-Badge am Ansichtscontainer der Ansicht festgelegt werden kann.

View badge on a view in the Activity bar

Warnsymbol für ungebundene Breakpoints

Debug-Erweiterungen können nun eine Hinweismeldung definieren, wenn eine aktive Debug-Sitzung mit ungebundenen Breakpoints vorliegt. Sie wird im Header der Breakpoints-Ansicht und auch beim Überfahren des grauen Breakpoint-Symbols im Editor angezeigt. Hier ist ein Beispiel für die Verwendung in der js-debug-Erweiterung.

Hovering the breakpoint warning icon

Diese Meldung kann in der neuen Eigenschaft strings im Debugger-Beitrag deklariert werden, wie folgt:

"strings": {
  "unverifiedBreakpoints": "Message text goes here"
}

VS Code Community-Diskussionen

Es gibt nun eine VS Code Community Discussions-Website für Erweiterungsautoren als Treffpunkt, um Fragen zu stellen, sich mit anderen Entwicklern zu vernetzen und großartige Arbeit zu präsentieren. Dort finden Sie Ankündigungen zu den VS Code APIs, können Fragen stellen oder nach vorhandenen Antworten suchen und die Extension Show and Tell ansehen.

Vorgeschlagene APIs

Jeder Meilenstein bringt neue vorgeschlagene APIs mit sich, und Erweiterungsautoren können sie ausprobieren. Wie immer freuen wir uns über Ihr Feedback. Hier sind die Schritte, um eine vorgeschlagene API auszuprobieren:

  1. Suchen Sie nach einem Vorschlag, den Sie ausprobieren möchten, und fügen Sie dessen Namen zu package.json#enabledApiProposals hinzu.
  2. Verwenden Sie das neueste vscode-dts und führen Sie vscode-dts dev aus. Es lädt die entsprechenden d.ts-Dateien in Ihren Arbeitsbereich herunter.
  3. Sie können nun gegen den Vorschlag programmieren.

Sie können keine Erweiterung veröffentlichen, die eine vorgeschlagene API verwendet. Es kann zu Breaking Changes in der nächsten Version kommen und wir möchten niemals bestehende Erweiterungen beeinträchtigen.

Erweiterbarer JavaScript-Notebook-Renderer

Unsere integrierten Notebook-Renderer stellen nun eine experimentelle API zur Verfügung, mit der Erweiterungen das Rendern von JavaScript-Inhalten anpassen können. Diese API stellt derzeit einen einzigen Hook, preEvaluate, zur Verfügung, der aufgerufen wird, bevor der JavaScript-Inhalt ausgewertet wird.

Um diese experimentelle API zu nutzen, muss Ihre Erweiterung die vscode.builtin-renderer API erweitern.

"contributes": {
  "notebookRenderer": [
    {
      "id": "vscode-samples.my-custom-js-extension",
      "displayName": "My custom javascript renderer extension",
      "entrypoint": {
        "extends": "vscode.builtin-renderer",
        "path": "./out/main.js"
      }
    }
  ]
}

Ihr Renderer kann dann einen Rendering-Hook auf dem vscode-builtin-renderer registrieren.

import type { RendererContext } from 'vscode-notebook-renderer';

export async function activate(ctx: RendererContext<void>) {
  const builtinRenderer = await ctx.getRenderer('vscode.builtin-renderer');
  if (!builtinRenderer) {
      throw new Error(`Could not load 'vscode.builtin-renderer'`);
  }

  builtinRenderer.experimental_registerJavaScriptRenderingHook({
    // Invoked before th js has been evaluated
    preEvaluate(outputItem: OutputItem, element: HTMLElement, script: string, signal, signal: AbortSignal): string | undefined | Promise<string | undefined> {
      // You can either modify `element` or return a new script source here
    }
  });
}

Testen Sie diese neue API und lassen Sie uns wissen, was Sie denken!

Ereignis für env.shell-Änderungen

Das neue Ereignis env.onDidChangeShell wurde hinzugefügt, um env.shell, die erkannte Standard-Shell für den Erweiterungs-Host, zu ergänzen.

env.onDidChangeShell(newShell => {
  console.log(newShell); // Same value as env.shell
});

Kontrollkästchen für Baum-Elemente

Der vorgeschlagene checkboxState ermöglicht es Ihnen, Kontrollkästchen zu Baum-Elementen hinzuzufügen.

Tree items with checkboxes

this.checkboxState = {
  state: vscode.TreeItemCheckboxState.Unchecked,
  tooltip: 'mark file as viewed'
};

Lokalisierung als Teil der API

In dieser Iteration führen wir eine neue API ein, um Erweiterungen bei der Lokalisierung von Zeichenfolgen zu unterstützen. Dies ersetzt die bisherigen Module vscode-nls und vscode-nls-dev, die in der Vergangenheit für die Lokalisierung verwendet wurden. Diese funktionieren weiterhin, erhalten aber keine neuen Funktionen mehr. Die neue API und das Tooling sind so konzipiert, dass sie vertraut, aber auch einfacher zu verwenden und flexibler sind. Darüber hinaus ermöglicht die Aufnahme in die VS Code API die Unterstützung für die Lokalisierung Ihrer Erweiterungen sowohl für VS Code für den Desktop als auch für VS Code für das Web.

Die Lokalisierung für VS Code-Erweiterungen hat vier wichtige Teile:

Die neue vscode.l10n API

declare module 'vscode' {
  export namespace l10n {
    /**
     * A string that can be pulled out of a localization bundle if it exists.
     */
    export function t(message: string, ...args: any[]): string;
    /**
     * A string that can be pulled out of a localization bundle if it exists.
     */
    export function t(options: {
      message: string;
      args?: any[];
      comment: string[];
    }): string;
    /**
     * The bundle of localized strings that have been loaded for the extension.
     */
    export const bundle: { [key: string]: string };
    /**
     * The URI of the localization bundle that has been loaded for the extension.
     */
    export const uri: Uri | undefined;
  }
}

Die vorgeschlagene API vscode.l10n ist ein neuer Namespace und bietet eine einzige Funktion t, mit der deklariert werden kann, dass eine Zeichenfolge lokalisiert werden soll. Die Funktion kann mit einer Zeichenfolge oder einem Objekt mit einer message-Eigenschaft aufgerufen werden. Die Funktion gibt die lokalisierte Zeichenfolge zurück, wenn sie vorhanden ist, andernfalls die ursprüngliche Zeichenfolge. Die Funktion unterstützt auch Argumente, die zur Formatierung der Zeichenfolge verwendet werden können, und Kommentare, die Übersetzern Kontext liefern können.

Ein einfaches Beispiel für die Verwendung der neuen API

import { l10n } from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const message = l10n.t('Hello in {0}!', vscode.env.language);
  vscode.window.showInformationMessage(message);
}

In diesem Beispiel wird die Zeichenfolge Hello in {0}! lokalisiert, wenn ein Lokalisierungsbundle für die aktuelle Sprache vorhanden ist. Das {0} wird durch die aktuelle Sprache ersetzt (standardmäßig en, oder fr für Französisch, pt-br für brasilianisches Portugiesisch usw.). Wenn kein Lokalisierungsbundle vorhanden ist, wird die Zeichenfolge unverändert zurückgegeben und mit den Argumenten formatiert. Sie fragen sich vielleicht, woher diese Lokalisierungsbundles stammen. Das werde ich im nächsten Abschnitt behandeln.

Die API vscode.l10n bietet auch Zugriff auf das Bundle lokalisierter Zeichenfolgen oder die URI des Zeichenfolgen-Bundles. Dies ist für Subprozess-Szenarien gedacht, die ich später behandeln werde.

WICHTIG: Wenn Sie diese API verwenden, müssen Sie auch explizit angeben, wo sich die Lokalisierungsbundles befinden. Dies geschieht durch Hinzufügen einer l10n-Eigenschaft in Ihrer package.json.

{
  "main": "./out/extension.js",
  "l10n": "./l10n"
}

Die l10n-Eigenschaft sollte ein relativer Pfad zu dem Ordner sein, der die Lokalisierungsbundles enthält.

Das Modul @vscode/l10n-dev

Das Modul @vscode/l10n-dev ist ein neues Modul, das zum Generieren der Lokalisierungsbundles verwendet wird. Sie können es entweder als Kommandozeilenwerkzeug oder als Bibliothek verwenden. Beide dienen dazu, die Lokalisierungsbundles durch Scannen von vscode.l10n.t(..)-Aufrufen aus dem bereitgestellten Quellcode zu generieren.

Hier ist ein einfaches Beispiel für die Verwendung des Kommandozeilenwerkzeugs:

npx @vscode/l10n-dev ./src --out ./l10n

Dadurch wird eine Datei bundle.l10n.json im Ordner ./l10n platziert. Von dort aus können Sie für jede unterstützte Locale eine Datei bundle.l10n.LOCALE.json erstellen. Nehmen wir beispielsweise an, der obige Befehl generiert die folgende Datei bundle.l10n.json:

{
  "Hello": "Hello",
  "Hello {0}": "Hello {0}",
  "Hello {0}/This is a comment": {
    "message": "Hello {0}",
    "comment": ["This is a comment"]
  }
}

Wenn Sie Französisch unterstützen möchten, würden Sie dies in einer Datei bundle.l10n.fr.json erstellen:

{
  "Hello": "Bonjour",
  "Hello {0}": "Bonjour {0}",
  "Hello {0}/This is a comment": "Bonjour {0}"
}

Hinweis: Sie benötigen die Kommentare nicht in den lokalisierten Bundles, da die Kommentare nur für Übersetzer nützlich sind, die das Originalbundle übersetzen.

Das Modul @vscode/l10n-dev kann auch zum Generieren von XLF-Dateien verwendet werden. Das VS Code-Team generiert XLF-Dateien, die wir dann Übersetzern bei Microsoft zur Verfügung stellen. Die Übersetzer geben uns die übersetzten XLF-Dateien zurück. Wir verwenden dann das Modul @vscode/l10n-dev, um die lokalisierten Bundles aus den übersetzten XLF-Dateien zu generieren. Wir planen, einen Blogbeitrag zu schreiben, der unseren Lokalisierungsprozess im Ganzen detaillierter beschreibt.

Das Modul @vscode/l10n

Da die API vscode.l10n nur im Erweiterungs-Host verfügbar ist, kann sie nicht in Subprozessen verwendet werden. Aus diesem Grund haben wir ein neues Modul erstellt, das in Subprozessen verwendet werden kann, um die Lokalisierungsbundles zu laden. Das Modul heißt @vscode/l10n und kann wie folgt verwendet werden:

import { l10n } from '@vscode/l10n';

// Load the translations for the current locale
l10n.config({
  uri: process.env.BUNDLE_URI_FROM_EXTENSION
});

// returns the translated string or the original string if no translation is available
l10n.t('Hello World');

Die Idee ist, dass Ihr Code auf der Erweiterungsseite, der für das Starten der Subprozesse verantwortlich ist, die APIs vscode.l10n.contents oder vscode.l10n.uri verwendet, um das Bundle oder die URI des Bundles an die Subprozesse zu übergeben. Die Subprozesse können dann das Modul @vscode/l10n verwenden, um das Bundle zu laden und die Funktion t zum Übersetzen von Zeichenfolgen zu verwenden. Die Funktion t, die vom Modul @vscode/l10n verwendet wird, wird auch im Modul @vscode/l10n-dev berücksichtigt, damit die Zeichenfolgen extrahiert und mit einem Prozess lokalisiert werden können.

Die Datei package.nls.json

An der Datei package.nls.json hat sich nichts geändert. Sie wird weiterhin verwendet, um die Standardzeichenfolgen zu deklarieren, die lokalisiert werden sollen, und sollte sich neben der package.json befinden. Sie können immer noch package.nls.LOCALE.json (wobei LOCALE etwas wie de oder zh-cn ist) haben, und die in dieser Datei deklarierten Zeichenfolgen werden zuerst berücksichtigt, wenn der Benutzer VS Code auf diese Locale eingestellt hat. Ein kleines Beispiel:

Ihre package.json

{
  "name": "my-extension",
  "version": "0.0.1",
  "main": "./out/extension.js",
  "l10n": "./l10n",
  //...
  "contributes": {
    "commands": [
      {
        "command": "my-extension.helloWorld",
        // The key is surrounded by % characters
        "title": "%my-extension.helloWorld.title%"
      }
    ]
  }
}

Ihre package.nls.json

{
  // That same key from the package.json
  "my-extension.helloWorld.title": "Hello World"
}

Ihre package.nls.de.json

{
  // That same key from the package.json
  "my-extension.helloWorld.title": "Hallo Welt"
}

Zusammenfassung

Es gibt sicherlich viel zu verdauen, aber hoffentlich gibt Ihnen dies eine Vorstellung von der Richtung, die wir bei der Lokalisierung in VS Code-Erweiterungen einschlagen.

Wenn Sie an einem vollständigen Beispiel interessiert sind, können Sie sich das l10n-sample ansehen.

Wenn Sie Fragen oder Feedback haben, können Sie uns an folgenden Orten Bescheid geben:

Log-Ausgabekanal

Die API vscode.workspace.createOutputChannel verfügt nun über eine neue boolesche Option log, mit der ein Ausgabe-Kanal erstellt werden kann, der nur zum Protokollieren verwendet wird.

/**
 * Creates a new {@link LogOutputChannel log output channel} with the given name.
 *
 * @param name Human-readable string which will be used to represent the channel in the UI.
 * @param options Options for the log output channel.
 */
export function createOutputChannel(
  name: string,
  options: { readonly log: true }
): LogOutputChannel;

Der LogOutputChannel unterstützt die folgenden Methoden zur Protokollierung von Nachrichten:

trace(message: string, ...args: any[]): void;
debug(message: string, ...args: any[]): void;
info(message: string, ...args: any[]): void;
warn(message: string, ...args: any[]): void;
error(error: string | Error, ...args: any[]): void;

Die von Erweiterungen erstellten Protokollausgabe-Kanäle werden als separate Einträge in der Ausgabe-Dropdown-Ansicht angezeigt. Nachrichten, die in diesen Protokollausgabe-Kanal geschrieben werden, werden im gleichen Format wie die VS Code-Protokollmeldungen dargestellt.

Log Output channel

Technik

Hin zu "Cross-Origin Isolation"

Wir haben Änderungen vorgenommen, um Cross-Origin Isolation für VS Code Desktop und vscode.dev zu ermöglichen. Dies wird neue leistungsstarke Funktionen wie Shared Array Buffers ermöglichen. Sowohl VS Code selbst als auch Erweiterungen und Webviews werden davon profitieren.

Cross-Origin Isolation ist derzeit hinter einem Feature-Flag verborgen und die Aktivierung kann unerwünschte Auswirkungen auf Erweiterungen und Webviews haben, die Ressourcen aus dem Internet laden. Sie können mehr darüber in Why you need "cross-origin isolated" for powerful features lesen. Wir würden uns frühzeitig über Ihr Feedback freuen.

Um dies auszuprobieren:

  • Starten Sie VS Code Desktop mit dem Flag --enable-coi, z. B. code --enable-coi.
  • Starten Sie vscode.dev und fügen Sie den Query-String vscode-coi hinzu.

Um zu überprüfen, ob Cross-Origin Isolation aktiviert ist, verwenden Sie den Anwendungs-Tab der Entwicklertools oder überprüfen Sie den Wert der globalen Variable crossOriginIsolated.

Cross Origin Isolation enabled for web

Verbesserte Startleistung

Wir haben in diesem Meilenstein Entwicklungszeit reserviert, um die Startzeit zu verbessern, von der Ausführung von VS Code bis zum Erscheinen eines blinkenden Cursors im Texteditor. Wir verfolgen unsere Leistungszahlen ständig und haben Ende des letzten Meilensteins eine leichte Verschlechterung festgestellt, die wir beheben wollten.

Dies war eine Teamleistung, bei der jeder verschiedene Änderungen im gesamten Quellcode beigesteuert hat. Hier werden einige Highlights genannt.

Keine synchronen fs-Aufrufe mehr

Wir vermeiden in der Regel die synchronen Varianten der Node.js fs-API, da wir wissen, dass diese Methoden die Skriptausführung stoppen, bis die Dateisystemanfrage beantwortet wurde. In einigen Fällen haben wir jedoch immer noch auf die synchrone fs-Ausführung gesetzt, insbesondere beim Öffnen oder Wiederherstellen von Fenstern beim Start. Wir konnten all diese Aufrufe auf ihre asynchronen Varianten umstellen, wodurch andere Skripte weiterlaufen können, während sie auf die Antwort der Dateisystemanfrage warten.

Mehr Bündelung von Haupteinstiegspunkten

Unsere Hauptbündel, aus denen die VS Code-Anwendung besteht, sind mehrere Megabyte groß und werden als einzelne Datei mit vscode-loader gebündelt und mit esbuild minimiert. In einigen Fällen haben wir jedoch keine Anstrengungen in die Bündelung investiert, insbesondere für:

  • Unser Node.js-Einstiegspunkt im Electron-Hauptprozess, der immer zuerst aufgerufen wird.
  • Unsere Bootstrap-JavaScript-Dateien im Electron-Renderer-Prozess zum Öffnen von Fenstern.

Die Bündelung in diesen beiden Bereichen ermöglicht es uns, die Kosten für das Nachschlagen von JavaScript-Dateien beim Start auf nur einen Aufruf für den Electron-Hauptprozess und einen Aufruf für das Fenster selbst zu reduzieren.

Code in eine spätere Phase verschieben

Die beste Leistungsoptimierung besteht darin, Code zu entfernen und ihn nie auszuführen, aber das ist offensichtlich keine skalierbare Lösung. Eine Alternative ist, die Ausführung von Code in eine spätere Phase zu verschieben, z. B. nachdem der Texteditor geöffnet wurde. In diesem Meilenstein haben wir unsere verschiedenen Komponenten erneut überprüft und einige davon in eine spätere Phase verschoben, um den kritischen Startpfad nicht zu blockieren.

Dokumentation interner Tools

Zur Leistungsanalyse nutzen wir intensiv die Entwicklertools des Browsers und die Überwachungstools des Betriebssystems. Wir haben jedoch auch einige Tools, die in VS Code integriert sind. Wir haben die benutzerdefinierten Tools in Perf Tools for VS Code Development dokumentiert, damit mehr Leute davon profitieren können.

Schnellere PR-Prüfungen

Für Pull-Anfragen führen wir automatische Unit-, Integrations- und Smoke-Tests durch. All dies geschieht parallel, aber jeder Schritt erfordert, dass unsere TypeScript-Quellen in JavaScript-Code transpiliert werden. Ursprünglich verwendeten wir dafür den TypeScript-Compiler. Er gibt JavaScript aus, führt aber auch eine Typenprüfung durch. Letzteres ist zeitaufwendig und für Tests nicht wirklich notwendig. Die gesamten Zeitkosten, durch die sich die Tests verzögerten, betrugen etwa 5 Minuten. Dann wechselten wir zu einer benutzerdefinierten Transpilierungs-Only-Lösung, die die TypeScript-Compiler-API verwendet. Dies war viel schneller, dauerte aber immer noch etwa 2 Minuten.

In diesem Meilenstein sind wir auf SWC (Speedy Web Compiler) umgestiegen, was noch schneller ist. Es dauert nun etwa 12 Sekunden, um alle unsere TypeScript-Quellen zu transpilieren. Dies ist eine enorme Verbesserung und ermöglicht es uns, viel schneller Feedback zu Pull-Anfragen zu erhalten.

Bemerkenswerte Fehlerbehebungen

  • 27799 macOS: OS-Dienste können den ausgewählten Text aus dem Editor nicht abrufen
  • 60821 Verbesserte Synchronisierung zwischen "Kürzlich geöffnet" und der Liste der zuletzt verwendeten Elemente auf der Startseite.
  • 156777 5 MB/Minute Speicherleck beim geöffneten Prozess-Explorer
  • 159862 Unter macOS Catalina ist im Vollbildmodus die Anzeige der Ampel-Schaltfläche falsch ausgerichtet.
  • 161305 Der Link "Fenster: Titelbalken-Stil" funktioniert nicht, wenn andere Fenstereinstellungen angezeigt werden.

Vielen Dank

Last but not least, ein großes Danke an die Mitwirkenden von VS Code.

Fehlerverfolgung

Beiträge zu unserer Fehlerverfolgung

Pull-Anfragen

Beiträge zu vscode

Beiträge zu vscode-css-languageservice

Beiträge zu vscode-pull-request-github

  • @Thomas1664: Schaltfläche hinzufügen, um immer bei eingehenden Änderungen zu pullen PR #3896

Beiträge zu debug-adapter-protocol

© . This site is unofficial and not affiliated with Microsoft.