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

Juni 2022 (Version 1.69)

Update 1.69.1: Das Update behebt diese Probleme.

Update 1.69.2: Das Update behebt diese Probleme.

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

Willkommen zur Juni 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.

Sehen Sie sich die Release Party an: Hören Sie zu, wie das VS Code-Team einige der neuen Funktionen bespricht. Die Aufzeichnung der Veranstaltung finden Sie auf unserem YouTube-Kanal.

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

3-Wege-Merge-Editor

In dieser Version haben wir weiter am 3-Wege-Merge-Editor gearbeitet. Diese Funktion kann durch Setzen von git.mergeEditor auf true aktiviert werden und wird in zukünftigen Versionen standardmäßig aktiviert sein.

Der Merge-Editor ermöglicht es Ihnen, Git-Merge-Konflikte schnell zu lösen. Wenn aktiviert, kann der Merge-Editor durch Klicken auf eine konfliktbehaftete Datei in der Quellcodeverwaltungsansicht geöffnet werden. Kontrollkästchen sind verfügbar, um Änderungen von Anderen oder Ihnen zu übernehmen und zu kombinieren.

Alle Sprachfunktionen sind im Merge-Editor verfügbar (einschließlich Diagnostik, Haltepunkte und Tests), sodass Sie sofortiges Feedback zu Problemen im zusammengeführten Ergebnis erhalten.

Das Ergebnis kann auch direkt bearbeitet werden. Beachten Sie, wie sich das Kontrollkästchen erwartungsgemäß aktualisiert.

Beim Schließen des Merge-Editors oder beim Übernehmen des Merges wird eine Warnung angezeigt, wenn nicht alle Konflikte behoben wurden.

Der Merge-Editor unterstützt Wort-für-Wort-Merging – solange die Änderungen sich nicht überschneiden, können beide Seiten angewendet werden. Wenn die Einfügereihenfolge wichtig ist, kann sie vertauscht werden. Der Konflikt kann jederzeit auch manuell gelöst werden.

Wir würden uns über Ihr Feedback freuen! Um einen Merge-Konflikt mit uns zu teilen, verwenden Sie den Befehl Merge Editor (Dev): Copy Contents of Inputs, Base and Result from JSON und fügen Sie den Inhalt in Ihr GitHub-Issue ein.

Command Center

Das Command Center wurde poliert und ist jetzt zum Ausprobieren bereit. Aktivieren Sie es über die Einstellung window.commandCenter.

Das Command Center ersetzt die normale Titelleiste und ermöglicht Ihnen, schnell nach Dateien in Ihrem Projekt zu suchen. Klicken Sie auf den Hauptbereich, um das Dropdown-Menü "Schnell öffnen" mit Ihren zuletzt verwendeten Dateien und einem Suchfeld anzuzeigen.

The Command Center and its hover message atop the window

Thema: GitHub Theme

Das Command Center verfügt außerdem über eine Schaltfläche auf der rechten Seite, um die Schnellzugriffsoptionen über "?" anzuzeigen. Links befinden sich Schaltflächen zum Zurückgehen und Vorwärtsgehen, um durch Ihre Editorhistorie zu navigieren.

Indikator für geänderte Einstellungen im Einstellungseditor

Der Einstellungseditor zeigt nun an, wenn eine Einstellung eine sprachspezifische Überschreibung hat. Zur Erklärung: sprachspezifische Überschreibungen haben immer Vorrang vor nicht sprachspezifischen Überschreibungen. Wenn der Wert einer Einstellung das Verhalten der Einstellung für eine bestimmte Dateityp nicht zu beeinflussen scheint, könnte dies daran liegen, dass die Einstellung eine sprachspezifische Überschreibung hat.

Der Anzeigetext wurde geändert, um klarer und prägnanter zu sein. Das kurze Video unten zeigt die neue Anzeige Woanders geändert. Wenn Sie mit der Maus über den Indikator fahren, wird eine Quick-Info angezeigt, die sprachspezifische Überschreibungen anzeigt, falls zutreffend. Das Video zeigt später den neuen Standard-Überschreibungsindikator mit dem Text Standardwert geändert.

Thema: Light Pink

Nicht stören-Modus

Der neue "Nicht stören"-Modus blendet alle nicht fehlerhaften Benachrichtigungs-Popups aus, wenn er aktiviert ist. Fortschrittsbenachrichtigungen werden automatisch in der Statusleiste angezeigt. Ausgeblendete Benachrichtigungen sind weiterhin im Benachrichtigungscenter einsehbar.

Do Not Disturb mode shown in the Status bar and Notification center

Sie können den "Nicht stören"-Modus umschalten, indem Sie das Benachrichtigungscenter öffnen (wählen Sie das Glockensymbol rechts in der Statusleiste) und auf das durchgestrichene Glockensymbol klicken. Der "Nicht stören"-Modus wird in der Statusleiste durch das durchgestrichene Glockensymbol angezeigt.

Umschalten zwischen Hell- und Dunkelthemen

Ein neuer Befehl ermöglicht das Umschalten zwischen Ihren bevorzugten Hell- und Dunkelthemen: Einstellungen: Zwischen Hell-/Dunkelthemen umschalten. Wenn Sie sich in einem hellen Thema befinden, wechselt der Befehl zu einem dunklen Thema und umgekehrt.

Wenn Sie sich in einem kontrastreichen Thema befinden, bleibt der Befehl kontrastreich und wechselt zum bevorzugten kontrastreichen Thema des gegenüberliegenden Farbthemas.

Die bevorzugten Themen werden durch die Einstellungen definiert:

  • workbench.preferredDarkColorTheme
  • workbench.preferredLightColorTheme
  • workbench.preferredHighContrastColorTheme
  • workbench.preferredHighContrastLightColorTheme

Minimap-Kontextmenü

Die VS Code Minimap zeigt eine grobe Übersicht Ihrer Quellcodedatei an der Seite des Editors. Sie konnten die Sichtbarkeit der Minimap über den Befehl Ansicht: Minimap umschalten umschalten oder die Minimap vollständig deaktivieren mit der Einstellung Editor > Minimap: Aktiviert (editor.minimap.enabled). Mit dieser Version gibt es nun ein Kontextmenü, um die Minimap einfach ein- oder auszublenden.

Minimap context menu

Sie können auch das Erscheinungsbild mit den Einstellungen Größe (editor.minimap.size), Skalierung (editor.minimap.scale) und Schieberegler (editor.minimap.showSlider) anpassen. Wenn die Minimap ausgeblendet ist, können Sie das Kontextmenü immer noch anzeigen lassen, indem Sie auf den seitlichen Rand klicken.

Menü "Teilen"

Der Befehl vscode.dev-Link kopieren kann aus dem Untermenü Datei > Teilen verwendet werden, um schnell einen vscode.dev-Link für Ihr geöffnetes GitHub-Repository zu erhalten. Das Untermenü "Teilen" ist auch aus dem Editor-Kontextmenü verfügbar.

Terminal

Shell-Integration

Die Shell-Integration für PowerShell, bash und zsh, die seit der Januar-Version in der Vorschau war, ist nun aus der Vorschau heraus! Wir planen, sie in der Version 1.70 standardmäßig zu aktivieren.

Um die Shell-Integrationsfunktion zu aktivieren, aktivieren Sie Terminal > Integriert > Shell-Integration: Aktiviert im Einstellungseditor oder setzen Sie den Wert in Ihrer settings.json.

"terminal.integrated.shellIntegration.enabled": true

Die Shell-Integration ermöglicht es dem VS Code-Terminal, mehr darüber zu verstehen, was in der Shell vor sich geht, um mehr Funktionen zu ermöglichen. Eines der Ziele der Shell-Integration war es, mit null Konfigurationsaufwand zu funktionieren. Dies wurde erreicht, indem das Shell-Integrationsskript automatisch über Shell-Argumente und/oder Umgebungsvariablen in die Shell-Sitzung "injiziert" wurde, wenn die Einstellung aktiviert ist. Es gibt einige Fälle, in denen dies nicht funktioniert, wie z. B. in Sub-Shells oder bei einigen komplexen Shell-Setups, aber wir haben auch eine manuelle Installationsroute für diese fortgeschritteneren Fälle.

Unten ist eine Zusammenfassung der Funktionen, die die Shell-Integration derzeit bietet.

Befehlsdekorationen und die Übersichtsleiste

Die Shell-Integration kann die Exit-Codes von Befehlen, die im Terminal ausgeführt werden, abrufen. Mithilfe dieser Informationen werden Dekorationen links von der Zeile hinzugefügt, die anzeigen, ob der Befehl erfolgreich war oder fehlgeschlagen ist. Diese Dekorationen erscheinen auch in der Übersichtsleiste in der Bildlaufleiste, genau wie im Editor.

Blue circles appear next to successful commands, red circles with crosses appear next to failed commands. The color of the circles appears in the scroll bar

Die Dekorationen können kontextbezogene Aktionen unterstützen, wie z. B. das erneute Ausführen des Befehls.

Clicking a successful command decoration shows a context menu containing items: Copy Output, Copy Output as HTML, Rerun Command and How does this work?

Die Befehlsdekorationen können mit den folgenden Einstellungen konfiguriert werden:

  • terminal.integrated.shellIntegration.decorationIcon
  • terminal.integrated.shellIntegration.decorationIconSuccess
  • terminal.integrated.shellIntegration.decorationIconError

Befehlsnavigation

Die von der Shell-Integration erkannten Befehle speisen in die Befehlsnavigation (Strg/Cmd+Oben, Strg/Cmd+Unten) ein, um zuverlässigere Befehlspositionen zu erhalten. Diese Funktion ermöglicht eine schnelle Navigation zwischen Befehlen und die Auswahl ihrer Ausgabe.

Zuletzt ausgeführten Befehl ausführen

Der Befehl Terminal: Zuletzt ausgeführten Befehl ausführen zeigt die Historie aus verschiedenen Quellen in einer Schnell-Auswahl an und bietet eine ähnliche Funktionalität wie die Rückwärtssuche einer Shell (Strg+R). Zuletzt ausgeführte Befehle stammen aus der Historie der aktuellen Sitzung, der Historie früherer Sitzungen für diesen Shell-Typ und der gemeinsamen Shell-Historie-Datei.

The "run recent command" command shows a Quick Pick with commands ran previously that can be filtered similar to the Go to File command

Einige weitere Funktionen des Befehls

  • Im Abschnitt "Aktuelle Sitzung" befindet sich ein Lupensymbol rechts von der Schnell-Auswahl, das die Befehlsausgabe in einem Editor öffnet.
  • Alt kann gehalten werden, um den Text im Terminal zu schreiben, ohne ihn auszuführen.
  • Die Menge der im Abschnitt "Vorherige Sitzung" gespeicherten Historie wird durch die Einstellung terminal.integrated.shellIntegration.history bestimmt.

Es ist derzeit keine Tastenkombination standardmäßig für Zuletzt ausgeführten Befehl ausführen zugewiesen, aber zum Beispiel könnte sie mit Strg+Leertaste mit der folgenden Tastenkombination verknüpft werden:

{
    "key": "ctrl+space",
    "command": "workbench.action.terminal.runRecentCommand",
    "when": "terminalFocus"
},

Zum zuletzt verwendeten Verzeichnis wechseln

Ähnlich wie die Funktion "Zuletzt ausgeführten Befehl ausführen" verfolgt der Befehl Terminal: Zum zuletzt verwendeten Verzeichnis wechseln besuchte Verzeichnisse und ermöglicht eine schnelle Filterung und Navigation (cd) dorthin.

<video src="/assets/updates/1_69/terminal-si-go-to-dir.mp4" autoplay loop controls muted title="Der Befehl Zum zuletzt verwendeten Verzeichnis wechseln zeigt eine Schnell-Auswahl mit zuvor navigierten Verzeichnissen, die Auswahl eines Verzeichnisses führt zur Ausführung von "cd Pfad"">

Alt kann gehalten werden, um den Text im Terminal zu schreiben, ohne ihn auszuführen.

Erkennung des aktuellen Arbeitsverzeichnisses

Die Shell-Integration teilt uns mit, was das aktuelle Arbeitsverzeichnis ist. Diese Information war bisher unter Windows ohne viele Tricks nicht zu ermitteln und erforderte unter macOS und Linux Abfragen, was für die Leistung nicht gut war.

Das aktuelle Arbeitsverzeichnis wird verwendet, um relative Links aufzulösen, das Verzeichnis anzuzeigen, in dem ein zuletzt ausgeführter Befehl ausgeführt wurde, und unterstützt die Funktion "terminal.integrated.splitCwd": "inherited" für geteilte aktuelle Arbeitsverzeichnisse.

Wachsende Unterstützung für Shell-Setups

In dieser Version haben wir die Integration mit bash-preexec verbessert, grundlegende Unterstützung für powerlevel10k hinzugefügt und mehr Fälle erkannt, in denen die Shell-Integration nicht funktioniert, und die Funktion dann automatisch deaktiviert. Wir erwarten im Laufe der Zeit eine lange Reihe von Verbesserungen in diesem Bereich.

Unterstützung für "SetMark"-Sequenzen

Das Terminal unterstützt nun die Sequenz 'OSC 1337 ; SetMark ST', die ursprünglich von iTerm2 erstellt wurde, wodurch es möglich ist, eine Markierung links von der Zeile sowie in der Bildlaufleiste hinzuzufügen.

When the sequence is written to the terminal, a small grey circle will appear to the left of the command, with a matching annotation in the scroll bar

Theme: Sapphire Theme

Hier sind einige Beispiele, wie Sie dies in Skripten auslösen können:

  • bash: echo -e 'Markiere diese Zeile\x1b]1337;SetMark\x07'
  • pwsh: Write-Host "Markiere diese Zeile`e]1337;SetMark`a"

Benutzerdefinierte Darstellung einfacher Powerline-Glyphen

Die vier üblichen schrägen Klammer-Symbole von Powerline werden nun benutzerdefiniert dargestellt, ähnlich wie Rahmen- und Blockzeichen, wenn die GPU-Beschleunigung im Terminal aktiviert ist. Dies bringt mehrere Vorteile mit sich:

  • Die Subpixel-Antialiasing wird nie verwendet, was unschöne rote oder blaue Umrandungen auf beiden Seiten verursachen und die "Powerline" unterbrechen könnte.
  • Diese Zeichen funktionieren ohne Installation einer gepatchten Schriftart.
  • Die Zeilenhöhe beeinflusst diese Zeichen.

Vorher

Line height would not be respected, leading to a Powerline symbol with a different height to adjacent cells. Additionally, a blue outline could appear when sub-pixel anti-aliasing was used

Nachher

Line height is now respected and greyscale anti-aliasing is used for improved rendering

Konsistentes Format für Nachrichten von VS Code

Zuvor verwendeten Nachrichten im Terminal, die direkt von VS Code und nicht vom Prozess geschrieben wurden, verschiedene Formate. Dies ist nun einheitlich mit einem lauten Format und einem subtileren Format.

Loud formatting starts the line with an asterisk with the inverted style, followed by a message using a blue background

Subtle formatting starts the line with an asterisk with the inverted style, followed by a message using the default background

Barrierefreiheitsverbesserungen

Das Terminal hat in dieser Iteration mehrere Verbesserungen für die Barrierefreiheit erfahren.

  • Standardmäßig sind mehr Links im Befehl Terminal: Ermittelten Link öffnen... verfügbar, mit der Möglichkeit, den Rest des Terminalpuffers zu durchsuchen.
  • Der Befehl Terminal: Zuletzt ausgeführten Befehl ausführen erlaubt nun die Eingabe des resultierenden Befehls ohne Ausführung, indem Alt gehalten wird.
  • Die Suche im Terminal hat verbesserte Meldungen für Screenreader.
  • Oben und Unten können im Navigationsmodus (Strg+Oben) ohne Modifikator verwendet werden.
  • Bild auf und Bild ab können nun im Navigationsmodus (Strg+Oben) verwendet werden, um seitenweise zu scrollen.

Prozess-Wiederverbindung und Wiederherstellungsverbesserungen

Die Terminal-Persistenz hat einige UX- und Zuverlässigkeitsverbesserungen erhalten.

  • Zuvor würde das Neuladen eines Fensters n Mal n Meldungen zur Sitzungswiederherstellung anzeigen. Jetzt wird die Meldung zur Sitzungswiederherstellung nur noch angezeigt, wenn die betreffende Sitzung eine Eingabe hatte.
  • Die Meldung zur Sitzungswiederherstellung, die zuvor das Datum enthielt, wurde auf "Historie wiederhergestellt" reduziert, um die Unübersichtlichkeit zu verringern.
  • Die Funktion "Umgebungsvariablen-Sammlung", die den Benutzer über Erweiterungen informiert, die die Umgebung ändern möchten (z. B. zur Unterstützung der automatischen Git-Authentifizierung), funktioniert nun auch über Neuladungen hinweg.

Aufgaben

Dekorationen

Vor einigen Iterationen haben wir dem Terminalpuffer und der Übersichtsleiste Dekorationen hinzugefügt, dank der Shell-Integrationsfunktion, um die Navigation im Terminal zu verbessern. Dekorationen markieren nun auch interessante Punkte für Tasks, zu denen mit der Befehlsnavigation (Strg/Cmd+Oben, Strg/Cmd+Unten) gesprungen werden kann.

Für Start-/Stopp-Tasks erscheint eine Dekoration neben dem Start des Tasks und ist entsprechend dem Exit-Code des Laufs, falls vorhanden, formatiert.

A task fails and an error decoration is added. A task succeeds and a success decoration is added

Für Watch-Tasks erscheint eine Dekoration neben dem ersten gemeldeten Problem bei jeder Kompilierung.

A watch task's first error is marked with a decoration

Symbol- und Farbunterstützung

Ein icon kann nun für eine Aufgabe mit einer Codicon-id und einer Terminal-ANSI-color-Eigenschaft festgelegt werden. Zum Beispiel:

{
  "label": "test",
  "type": "shell",
  "command": "echo test",
  "icon": { "id": "light-bulb", "color": "terminal.ansiBlue" }
}

The task custom icon appears in the terminal tabs list

Tasks mit dem kind-Eigenschaftswert test verwenden standardmäßig das beaker-Symbol.

Quellcodeverwaltung

Commit "Aktionsschaltfläche" für Git-Repositorys

In der Version 1.61 wurden die "Aktionsschaltflächen" Veröffentlichen und Änderungen synchronisieren für Git-Repositorys hinzugefügt. In diesem Meilenstein haben wir eine Commit-Schaltfläche hinzugefügt, die eine primäre Aktion sowie eine Reihe von sekundären Aktionen hat. Die sekundäre Aktion kann über die Einstellung git.postCommitCommand gesteuert werden und ermöglicht es Ihnen, nach dem Commit auch einen Push oder Sync durchzuführen.

Mit der Hinzufügung der "Aktionsschaltfläche" Commit gibt es eine neue Einstellung, git.showActionButton, mit der Sie die Git-Aktionsschaltflächen steuern können, die in der Quellcodeverwaltungsansicht angezeigt werden. Sie können weiterhin die allgemeine Einstellung scm.showActionButton verwenden, um die Sichtbarkeit von Aktionsschaltflächen, die von einer Erweiterung beigesteuert werden, die einen Quellcodeverwaltungsanbieter implementiert, global zu deaktivieren.

Commit-Nachricht mit einem Editor verfassen

In diesem Meilenstein können Sie Commit-Nachrichten jetzt mit einem vollständigen Texteditor verfassen, wenn keine Nachricht im Commit-Eingabefeld angegeben ist. Um diesen neuen Ablauf zu nutzen, klicken Sie auf die Schaltfläche Commit, ohne eine Commit-Nachricht anzugeben.

Sie können Ihre Commit-Nachricht nun im Editor verfassen. Um die Commit-Nachricht zu übernehmen und den Commit-Vorgang abzuschließen, schließen Sie den Editor-Tab oder wählen Sie die Schaltfläche Commit-Nachricht übernehmen in der Werkzeugleiste des Editors aus. Um den Commit-Vorgang abzubrechen, können Sie entweder den Inhalt des Texteditors löschen und den Editor-Tab schließen oder die Schaltfläche Commit-Nachricht verwerfen in der Werkzeugleiste des Editors auswählen.

Sie können diesen neuen Ablauf deaktivieren und auf die vorherige Erfahrung zurückfallen, die das Quick-Input-Steuerelement verwendet, indem Sie die Einstellung git.useEditorAsCommitInput umschalten. Nach Änderung der Einstellung müssen Sie VS Code neu starten, damit die Änderung wirksam wird.

Um denselben Ablauf für git commit-Befehle im integrierten Terminal zu nutzen, aktivieren Sie die Einstellung git.terminalGitEditor. Nach der Aktivierung der Einstellung müssen Sie Ihre Terminal-Sitzung neu starten.

Branch-Schutzindikatoren

In der letzten Version haben wir die Einstellung git.branchProtection hinzugefügt, mit der Sie bestimmte Branches als geschützt konfigurieren können. In diesem Meilenstein wurden visuelle Indikatoren (Schlosssymbol) zur Statusleiste und zum Branch-Picker für die geschützten Branches hinzugefügt.

Statusleiste

The branch protection icon is shown in the Status bar

Branch-Picker

The branch protection icon is shown in the branch picker

Debugging

Verbesserte UI für "Step Into Target"

Einige Debugger erlauben es, bei einer unterbrochenen Zeile direkt in bestimmte Funktionsaufrufe zu "schreiten". In dieser Iteration haben wir die Benutzeroberfläche dafür verbessert.

  • Wenn Sie mit der rechten Maustaste auf einen Zielbereich in einer Quellcodezeile klicken und Step Into Target auswählen, wird automatisch in den Zielbereich "geschritten", falls vorhanden.
  • Ein neuer Befehl Debug: Step Into Target ist in der Befehlspalette und mit der Tastenkombination ⌘F11 (Windows, Linux Ctrl+F11) verfügbar.

Navigation in der Debug-Konsole

Konsolenzugriff über das Schnellzugriffsmenü

Es gibt jetzt ein Schnellzugriffsmenü, um eine Liste Ihrer Debug-Konsolen anzuzeigen. Im Menü können Sie einen Konsolennamen auswählen, um ihn im unteren Bereich anzuzeigen. Hier können Sie Ihre Konsolennamen suchen und filtern.

Thema: GitHub Dark Dimmed

Es gibt drei verschiedene Möglichkeiten, auf dieses Schnellzugriffsmenü zuzugreifen:

  • Eingabe von ? im Menü "Schnell öffnen" (⌘P (Windows, Linux Ctrl+P)), gefolgt von der Auswahl der Option zum Anzeigen von Debug-Konsolen.

  • Verwendung des Befehls Debug: Debug-Konsole auswählen.

  • Manuelles Eingeben von debug consoles (mit einem abschließenden Leerzeichen) im Menü "Schnell öffnen".

Konsolenzugriff über das Menü "Ansicht"

Sie können auch von der vorhandenen Menüansicht auf eine Liste der Debug-Konsolen zugreifen. Geben Sie view (mit einem abschließenden Leerzeichen) in das Menü "Schnell öffnen" ein und scrollen Sie nach unten zum Abschnittsüberschriftenbereich Debug-Konsole. Dort sehen Sie eine Liste der verfügbaren Debug-Konsolen.

Umschalten zwischen Konsolen

Sie können jetzt ⇧⌘[ (Windows, Linux Ctrl+PageUp) verwenden, um zur vorherigen Debug-Konsole zu navigieren, und ⇧⌘] (Windows, Linux Ctrl+PageDown), um zur nächsten Konsole zu gelangen.

Laden von Skripten: Suchen und Filtern

Zuvor konnten Sie Ihre geladenen Skripte nur in einer Baumansicht über das Menü Ausführen und Debuggen einsehen. Jetzt können Sie ein Skript mit dem neuen Befehl Debug: Geladenes Skript öffnen... suchen und dorthin navigieren. Es funktioniert genauso wie der Befehl Datei öffnen..., aber Sie können zu einem geladenen Skript navigieren.

JavaScript-Debugging

Sourcemap-Umschaltung

Sie können jetzt Sourcemaps einfach ein- und ausschalten, indem Sie auf das Kompass-Symbol 🧭 in der Titelleiste der Aufrufliste klicken. Wenn Sourcemaps ausgeschaltet sind, funktionieren in den Quellcodedateien gesetzte Breakpoints immer noch, werden aber zu ihren entsprechenden Stellen im kompilierten Code verschoben, und der Debugger durchläuft den kompilierten Code anstelle des Quellcodes.

Thema: Codesong

Wenn Sourcemaps ausgeschaltet sind, wird in der Debug-Werkzeugleiste eine ähnliche Schaltfläche angezeigt, die sie wieder einschalten kann. Der Umschaltzustand wird im Arbeitsbereich gespeichert.

toString()-Variablen-Vorschauen

Wenn eine Variable oder eine Eigenschaft eine benutzerdefinierte toString()-Methode hat, wird diese aufgerufen, um die Vorschau in der Ansicht VARIABLEN und in Tooltips anzuzeigen. Dies ist eine Verbesserung gegenüber generischen Objektvorschauen für komplexe Typen, die gute String-Darstellungen haben.

Zum Beispiel hat VS Codes Range eine toString-Methode, die die Lesbarkeit auf einen Blick erleichtert.

Displaying the toString() method output in the Variables view

Unterstützung für "Step Into Target"

Der JavaScript-Debugger unterstützt jetzt Step Into Target, was es Ihnen ermöglicht, einfach in Funktionsaufrufe einer Codezeile zu "schreiten".

Step Into Targets dropdown

Dies kann über den Befehl Debug: Step Into Target (⌘F11 (Windows, Linux Ctrl+F11)) oder durch Rechtsklick auf die Zeile aufgerufen werden.

Warnsymbol für ungebundene Breakpoints im JavaScript-Debugging

Wenn Sie ein TypeScript/JavaScript-Projekt debuggen und Schwierigkeiten haben, Sourcemaps zu konfigurieren oder Ihre Breakpoints zu binden, zeigt VS Code nun eine Hinweismeldung in der Breakpoint-Ansicht mit einem Link zum Tool zur Fehlerbehebung bei Breakpoints des JavaScript-Debuggers an. Sie sehen den Hinweis auch, wenn Sie mit der Maus über das graue Breakpoint-Symbol im Editor fahren.

hovering the breakpoint warning icon

Wenn die API zum Anzeigen dieses Hinweises finalisiert ist, können andere Debugger den Hinweis mit ihrer eigenen entsprechenden Meldung anzeigen.

Editor

Refactoring mit Vorschau

Zuvor gab es keine Möglichkeit, Änderungen zu überprüfen, die durch ein Refactoring angewendet worden wären. Um die Refactoring-Erfahrung zu verbessern, gibt es nun den Befehl Refactor mit Vorschau, der über die Befehlspalette aufgerufen werden kann. Refactor mit Vorschau... funktioniert genauso wie der Befehl Refactor..., öffnet aber ein Vorschaufenster für Refactorings. Benutzer können eine Refactoring-Vorschau auswählen, um eine größere Ansicht der Refactoring-Vorschau im Editor zu öffnen. Diese Iteration konzentrierte sich hauptsächlich auf die Vorschau von Codeänderungen durch Refactorings, zukünftige Funktionen und eine benutzerdefinierte Code-Aktionsmenü-Steuerung werden folgen.

Refactor preview panel showing a refactoring that results in two changes

Refactor mit Vorschau... öffnet eine Leiste im Arbeitsbereich und öffnet die Ansicht des Refactoring-Vorschau-Editors.

Sprachen

Unterstützung für spitze Klammer-Links in Markdown

Markdown ermöglicht die Verwendung von spitzen Klammern, um Linkziele zu schreiben, die Leerzeichen oder andere Sonderzeichen enthalten.

[Some link](<path to file with spaces.md>)

In dieser Iteration haben wir die Unterstützung für spitze Klammer-Links verbessert, sodass sie im Editor korrekt hervorgehoben und anklickbar sind.

Emmet Inline-Vervollständigungseinstellung

Emmet verfügt über eine neue Einstellung emmet.useInlineCompletions, die Inline-Vervollständigungen in Dateien ermöglicht. Vorerst ist es am besten, die Einstellung nur für die Bearbeitung von HTML- und CSS-Dateien zu aktivieren.

Das kurze Video unten wurde mit der Einstellung editor.quickSuggestions auf off für alle Einträge aufgenommen.

JSON-Benachrichtigungen im Sprachindikator

Wenn zu viele Faltungsbereiche, Dokumentensymbole oder Farbdekorationen angezeigt werden sollen, verwendet VS Code nicht mehr Benachrichtigungen, sondern den JSON-Sprachindikator, um den Benutzer zu informieren.

JSON notifications from the Status bar JSON language indicator

Änderung der Einstellung für HTML-Schlusssatzformatierung

Die Einstellung html.format.endWithNewline wurde zugunsten von files.insertFinalNewline entfernt.

files.insertFinalNewline gilt für alle Programmiersprachen. Wenn Sie unterschiedliche Einstellungen pro Sprache wünschen, können Sie einen Sprachumfang verwenden.

{
  "[html]": {
    "files.insertFinalNewline": true
  }
}

Notebooks

Unterstützung für In-Notebook-Erweiterungsempfehlungen

Um die Einstiegserfahrung für Notebooks zu verbessern, wenn eine erforderliche Erweiterung nicht installiert ist, haben wir den Erweiterungsempfehlungsfluss aktualisiert und ermöglichen es Ihnen, Erweiterungen direkt von einem Notebookfenster aus zu installieren. Dies reduziert die Anzahl der Schritte, die erforderlich sind, um von "keine Erweiterungen installiert" zu "ausführbare Zellen" in VS Code zu gelangen, erheblich. In dieser Iteration wurde diese Erfahrung für Python Jupyter Notebooks mit weiteren Notebook-Typen und Sprachen aktiviert, die folgen werden.

A Quick Pick depicting two entries. The top entry is selected that has a light bulb to its left and says 'Install suggested extensions Python + Jupyter'

Kommentare

Umschalten der Editor-Kommentierung

Der neue Befehl Kommentare: Editor-Kommentierung umschalten schaltet alle Editor-Kommentierungsfunktionen um, einschließlich der Kommentierungsbereich-Dekoration, des "+" beim Hover über Zeilen und aller Editor-Kommentar-Widgets. Die Kommentierung wird im Zen-Modus automatisch deaktiviert.

Ziehen für mehrzeilige Kommentare

Die Schaltfläche "Kommentar hinzufügen" ("+") kann gezogen werden, um einen mehrzeiligen Kommentar hinzuzufügen.

Unternehmen

UpdateMode Gruppenrichtlinie unter Windows

VS Code unterstützt jetzt Windows-Registrierungsbasierte Gruppenrichtlinien, die es Systemadministratoren ermöglichen, Richtlinien auf verwalteten Rechnern zu erstellen und bereitzustellen.

Die erste unterstützte VS Code-Richtlinie ist UpdateMode, die die Einstellung update.mode überschreibt und steuert, ob VS Code automatisch aktualisiert wird, wenn eine neue Version veröffentlicht wird.

Weitere Informationen finden Sie unter Gruppenrichtlinien unter Windows in der Enterprise-Dokumentation.

VS Code für das Web

Thementester unterstützt integrierte Themen

Der Thementester ist eine Route in vscode.dev, mit der ein Farbthema angezeigt und ausprobiert werden kann, ohne es zu installieren. Dies war für Themen-Erweiterungen auf dem Marketplace verfügbar, indem die Erweiterungs-ID und der Themenname angegeben wurden. Um beispielsweise das GitHub Theme-Erweiterung (Erweiterungs-ID github.github-vscode-theme) "GitHub Dark Default"-Thema anzuzeigen, würden Sie vscode.dev mit der URL starten:

https://vscode.dev/editor/theme/github.github-vscode-theme/GitHub%20Dark%20Default

Color theme tester with vscode.dev showing GitHub Theme extension GitHub Dark Default

Der Thementester kann nun auch mit den integrierten Themen von VS Code verwendet werden. Verwenden Sie vscode.theme-defaults als Platzhalter für die Erweiterungs-ID und dann den Themenschlüssel, den Sie ausprobieren möchten.

Um beispielsweise das "High Contrast Light"-Thema zu testen, würden Sie die folgende URL verwenden:

https://vscode.dev/editor/theme/vscode.theme-defaults/Default%20High%20Contrast%20Light

Teilweise Lokalisierungsunterstützung für Erweiterungen

In der letzten Iteration in vscode.dev haben wir die Lokalisierung von Zeichenfolgen eingeführt, die vom Kernprodukt bereitgestellt werden. In dieser Iteration nehmen wir weitere Zeichenfolgen auf – insbesondere statische Zeichenfolgen, die von Erweiterungen in ihrem Erweiterungsmanifest bereitgestellt werden. Es gibt immer noch andere Segmente von Zeichenfolgen, die von Erweiterungen bereitgestellt werden und lokalisiert werden müssen (Zeichenfolgen, die in ihrem Quellcode deklariert sind), daher werden wir diese Arbeit in der nächsten Iteration fortsetzen.

Befehl "Anzeigesprache konfigurieren"

Für einige Benutzer ist es nicht möglich, die von ihrem Browser verwendete Sprache zu konfigurieren. Um dies zu umgehen, verfügt VS Code für das Web nun über den Befehl Anzeigesprache konfigurieren, mit dem Sie die Standardsprache überschreiben können, auf die Ihr Browser eingestellt ist.

Zusätzlich können Sie den Befehl Anzeigesprache-Präferenz löschen verwenden, um diese Überschreibung zu entfernen.

VS Code Server (Private Vorschau)

In VS Code möchten wir, dass Benutzer nahtlos die Umgebungen nutzen können, die sie am produktivsten machen. Die VS Code Remote Development-Erweiterungen ermöglichen es Ihnen, in der Windows-Subsystem für Linux (WSL), auf Remote-Maschinen über SSH und in Dev-Containern direkt von VS Code aus zu arbeiten. Diese Erweiterungen installieren einen Server in der Remote-Umgebung, wodurch lokales VS Code reibungslos mit Remote-Quellcode und Runtimes interagieren kann.

Wir bieten jetzt eine private Vorschau eines eigenständigen "VS Code Servers" an, einem Dienst, der auf demselben zugrunde liegenden Server wie die Remote-Erweiterungen aufbaut, plus einige zusätzliche Funktionalitäten wie eine interaktive CLI und die Ermöglichung sicherer Verbindungen zu vscode.dev, ohne eine SSH-Verbindung zu benötigen.

The VS Code Server's help menu and a remote VS Code connection

Unser ultimatives Ziel ist es, die code-CLI, die Sie heute verwenden, zu erweitern, um sowohl Desktop- als auch Web-Instanzen von VS Code zu öffnen, unabhängig davon, wo Ihre Projekte gespeichert sind. Während wir aktiv darauf hinarbeiten, ist der VS Code Server ein großartiger Meilenstein, den wir gespannt als private Vorschau veröffentlichen, um Ihr Feedback zu erhalten.

Sie können mehr darüber erfahren, wie Sie mit dem VS Code Server beginnen können, in seinem Ankündigungs-Blogbeitrag und Video und weitere Details in seiner Dokumentation überprüfen.

Beiträge zu Erweiterungen

ESLint

Version 2.2.6 der ESLint-Erweiterung wurde veröffentlicht. Zusätzlich zu verschiedenen Fehlerbehebungen gibt es jetzt Linting-Unterstützung in Notebook-Zellen für alle unterstützten ESLint-Sprachen.

ESlint validating notebook cells

Jupyter

IPyWidgets

IPyWidgets werden jetzt für Kernel unterstützt, die nicht Python sind, wie z. B. Common Lisp und IHaskell.

Eine Reihe von IPyWidget-Problemen im Zusammenhang mit dem Laden von Ressourcen (Bilder, Skripte usw.) wurden behoben, wodurch die Unterstützung für Widgets wie VegaFusion, ipyleaflet, Chemiscope, mobilechelonian und ipyturtle verbessert wurde.

Weitere bemerkenswerte IPyWidget-Korrekturen umfassen die Anzeige komplexer und verschachtelter (einschließlich interaktiver) Ausgaben innerhalb des Jupyter Output-Widgets.

Web-Erweiterung

Wir haben Fortschritte bei der Unterstützung weiterer Kernfunktionalitäten in der Webversion der Jupyter-Erweiterung gemacht.

In diesem Monat wurden die folgenden Funktionen in die Web-Erweiterung portiert:

  • Exportieren eines interaktiven Fensters
  • Debugging eines interaktiven Fensters
  • Zusammenklappbare Zellen in einem interaktiven Fenster

Wenn Sie mit der Funktionalität experimentieren möchten, starten Sie Jupyter von Ihrem lokalen Computer mit

jupyter notebook --no-browser --NotebookApp.allow_origin_pat=https://.*\.vscode-cdn\.net

Verbinden Sie sich dann damit über den Befehl Jupyter: Jupyter-Server für Verbindungen angeben aus vscode.dev.

Weitere Informationen (und um zu kommentieren) finden Sie in diesem Diskussionspunkt.

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:

  • Eine neue Einstellung "githubPullRequests.ignoredPullRequestBranches", um Branches für Pull Requests zu ignorieren.
  • Der Dialog Branch veröffentlichen? kann beim Erstellen eines PR übersprungen werden, indem die Einstellung "githubPullRequests.pushBranch" verwendet wird.
  • Eine Auto-Merge-Checkbox ist nun im Übersicht-Editor verfügbar.

Sehen Sie sich das Changelog für Release 0.46.0 der Erweiterung an, um weitere Highlights zu entdecken.

Vorschau-Funktionen

Unterstützung für TypeScript 4.8

Dieses Update beinhaltet Unterstützung für die kommende Veröffentlichung von TypeScript 4.8. Weitere Details zu den aktuellen Arbeiten des TypeScript-Teams finden Sie im Iterationsplan für TypeScript 4.8.

Um die Nightly-Builds von TypeScript 4.8 nutzen zu können, installieren Sie die Erweiterung TypeScript Nightly.

Markdown-Link-Validierung

Wir haben die Link-Validierung in Markdown-Dateien weiter verfeinert. Diese experimentelle Funktion kann Ihnen helfen, defekte Links zu Bildern oder Überschriften in Markdown-Dateien zu erkennen.

Zusätzlich zur Behebung einer Reihe von Fehlern und zur Verbesserung der Leistung haben wir einige Einstellungen umbenannt, um ihre Funktionalität klarer zu gestalten. Hier sind die neuen Einstellungsnamen:

  • markdown.experimental.validate - Aktiviert/Deaktiviert die gesamte Link-Validierungsfunktionalität.
  • markdown.experimental.validate.fileLinks.enabled - Aktiviert/Deaktiviert die Validierung von Links zu lokalen Dateien: [Link](/pfad/zur/datei.md)
  • markdown.experimental.validate.fileLinks.markdownFragmentLinks - Aktiviert/Deaktiviert die Validierung des Fragmentteils von Links zu lokalen Dateien: [Link](/pfad/zur/datei.md#ein-header)
  • markdown.experimental.validate.fragmentLinks.enabled - Aktiviert/Deaktiviert die Validierung von Links zu Überschriften in der aktuellen Datei: [Link](#_ein-header)
  • markdown.experimental.validate.referenceLinks.enabled - Aktiviert/Deaktiviert die Validierung von Referenz-Links: [Link][ref].
  • markdown.experimental.validate.ignoreLinks - Eine Liste von Links, die von der Validierung übersprungen werden. Dies ist nützlich, wenn Sie auf Dateien verlinken, die nicht auf der Festplatte vorhanden sind, aber existieren, sobald das Markdown veröffentlicht wurde.

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

Einstellungsprofile

In den letzten Monaten haben wir daran gearbeitet, Einstellungen-Profile in VS Code zu unterstützen, was eine der am häufigsten nachgefragten Funktionen von der Community ist. In diesem Meilenstein freuen wir uns, Ihnen mitteilen zu können, dass diese Funktion in der Insiders-Version über die Einstellung workbench.experimental.settingsProfiles.enabled zur Vorschau verfügbar ist. Bitte probieren Sie diese Funktion aus und geben Sie uns Ihr Feedback, indem Sie Issues in unserem VS Code Repository erstellen oder in Issue #116740 kommentieren.

Ein Einstellungen-Profil besteht aus Einstellungen, Tastenkombinationen, Erweiterungen, Status, Aufgaben und Snippets. Sie können VS Code für verschiedene Entwicklungsumgebungen wie Web, maschinelles Lernen oder für mehrere Programmiersprachen-Klassenzimmer wie Python, Java oder für persönliche Modi wie Arbeit oder Demo anpassen und sie als Einstellungen-Profile speichern. Sie können mehrere Arbeitsbereiche (Ordner) mit unterschiedlichen Profilen gleichzeitig öffnen, basierend auf den Projekten, an denen Sie arbeiten, dem Klassenzimmer, das Sie besuchen, oder wenn Sie präsentieren.

Unten sehen Sie ein Beispiel für die Anpassung von VS Code für eine Webentwicklungs-Umgebung und die Erstellung eines Einstellungen-Profils daraus.

Hier sehen Sie, wie Sie einfach von einem Entwicklungsprofil zu einem Demo-Profil wechseln können.

Sie können Ihr React-Projekt im Webentwicklungs-Profil und Ihr Python-Klassenprojekt im Python-Klassen-Profil gleichzeitig öffnen, wie im folgenden Bild gezeigt.

Multiple opened Profiles

Sie können die Vordergrund- und Hintergrundfarben des Statusleisten-Eintrags für Einstellungen-Profile mit den folgenden Farbanpassungsschlüsseln in den Einstellungen anpassen.

"workbench.colorCustomizations": {
    "statusBarItem.settingsProfilesBackground": "#ce4918",
    "statusBarItem.settingsProfilesForeground": "#e0dfdb",
}

Sie können Einstellungen-Profile über die Aktion Einstellungen-Profil entfernen... verwalten und löschen, die im Untermenü Einstellungen-Profile im Zahnradmenü der Einstellungen verfügbar ist.

Removing Settings Profiles

Obwohl Sie VS Code pro Profil anpassen können, gibt es einige Einstellungen, die nur auf Anwendungsebene angepasst werden können. Beispielsweise werden alle anwendungsbezogenen Einstellungen wie update.mode, Sprachpaket-Erweiterungen, die Aktivierung der Einstellungen-Synchronisierung und der Status des Arbeitsbereichs-Vertrauens über alle Profile hinweg auf Anwendungsebene angepasst.

Zugriff auf Bearbeitungssitzungen über VS Code für Web und Desktop

In diesem Meilenstein kündigen wir eine Vorschau auf Bearbeitungssitzungen in VS Code an. Bearbeitungssitzungen ermöglichen es Ihnen, Ihre nicht committeten Änderungen mitzunehmen, wenn Sie an einem Repository weiterarbeiten, wo immer VS Code verfügbar ist, sei es VS Code für Web, Desktop-VS Code oder auf verschiedenen Rechnern.

Beispielsweise können Sie Bearbeitungssitzungen verwenden, um Arbeitsänderungen zu übertragen und darauf zuzugreifen

  • Von einem Repository in github.dev zu einem lokalen Desktop-Klon dieses Repositorys.
  • Von einem Klon eines Repositorys auf einem Windows-Gerät zu einem Klon dieses Repositorys auf einem macOS-Gerät.

Bearbeitungssitzungen befinden sich derzeit in der Vorschau hinter der Einstellung workbench.experimental.editSessions.enabled. In dieser ersten Version können Sie die folgenden Befehle verwenden, um Ihre Arbeitsänderungen zu speichern und fortzusetzen:

  • Bearbeitungssitzungen: Aktuelle Bearbeitungssitzung speichern
  • Bearbeitungssitzungen: Letzte Bearbeitungssitzung fortsetzen

Um mit Bearbeitungssitzungen zu beginnen, verwenden Sie den Befehl Bearbeitungssitzungen: Aktuelle Bearbeitungssitzung speichern und melden Sie sich bei Aufforderung mit GitHub- oder Microsoft-Authentifizierung an. Verwenden Sie dann den Befehl Bearbeitungssitzungen: Letzte Bearbeitungssitzung fortsetzen in einem Repository auf einem anderen Rechner oder einer anderen VS Code-Instanz, um den Arbeitsinhalt aller geänderten Dateien in Ihren Arbeitsbereich wiederherzustellen. Sie können sich jederzeit von Bearbeitungssitzungen abmelden, indem Sie den Befehl Bearbeitungssitzungen: Abmelden verwenden.

Während wir die Erfahrung mit Bearbeitungssitzungen weiter verbessern, probieren Sie es aus und teilen Sie uns Ihr Feedback über einen Kommentar in Issue #141293 mit.

Erweiterungs-Authoring

Iterierbare Sammlungstypen in vscode.d.ts

Um die Arbeit mit den Sammlungstypen in vscode.d.ts zu erleichtern, haben wir sie in dieser Iteration alle iterierbar gemacht. Dies ermöglicht die Verwendung von for...of-Schleifen und Spread-Operatoren mit diesen Typen.

const data: vscode.DataTransfer = ...;
for (const [mime, item] of data) {
    const str = await item.asString();
    ...
}

Die vollständige Liste der neu iterierbaren Typen ist:

  • DiagnosticCollection
  • DataTransfer
  • EnvironmentVariableCollection
  • TestItemCollection

Erweiterbare Notebook-Renderer

Notebook-Renderer ermöglichen es Erweiterungen, die Darstellung von Zellen und Ausgaben in Notebooks anzupassen. In dieser Iteration haben wir die Notebook-Renderer-API erweitert, um es einem Renderer zu ermöglichen, einen anderen Renderer zu ergänzen, einschließlich einiger der integrierten Renderer von VS Code. Dies ermöglicht es Erweiterungen, neue Funktionalitäten zur Notebook-Darstellung hinzuzufügen, ohne einen vollständigen Renderer neu implementieren zu müssen. Es bietet auch eine bessere Benutzererfahrung, da Benutzer nicht zwischen verschiedenen Renderer wechseln müssen, um korrekt dargestellte Inhalte zu sehen.

Das Beispiel für die Erweiterung von Notebook-Renderern zeigt, wie eine Erweiterung den integrierten Markdown-Renderer von VS Code mit Emoji-Unterstützung erweitern kann. Werfen wir einen kurzen Blick auf die wichtigsten Teile!

Die API für erweiterbare Notebook-Renderer ist absichtlich locker definiert. Um zu beginnen, muss unsere Erweiterung einen neuen Notebook-Renderer beitragen. Da wir einen vorhandenen Renderer erweitern, verwenden wir hier das Feld entrypoint, um sowohl die ID des zu erweiternden Renderers (in diesem Fall den integrierten vscode.markdown-it-renderer von VS Code) als auch einen Pfad zum zu ladenden Renderer-Skript anzugeben.

"notebookRenderer": [
    {
        "id": "sample.markdown-it.emoji-extension",
        "displayName": "Markdown it Emoji renderer",
        "entrypoint": {
            "extends": "vscode.markdown-it-renderer",
            "path": "./out/emoji.js"
        }
    }
]

Dieser Renderer wird nun aktiviert, wenn der vscode.markdown-it-renderer aktiviert wird.

Um nun den vscode.markdown-it-renderer zu erweitern, kann unser Renderer eine Methode des Basis-Renderers aufrufen. Diese Methode ist spezifisch für den Basis-Renderer. In diesem Fall rufen wir zuerst den Basis-Renderer mit getRenderer ab und rufen dann extendMarkdownIt darauf auf, um die Instanz von Markdown-It zu erweitern, die er für das Rendern verwendet.

import type * as MarkdownIt from 'markdown-it';
import type { RendererContext } from 'vscode-notebook-renderer';

interface MarkdownItRenderer {
    extendMarkdownIt(fn: (md: MarkdownIt) => void): void;
}

export async function activate(ctx: RendererContext<void>) {
    // Acquire the base renderer
    const markdownItRenderer = await ctx.getRenderer('vscode.markdown-it-renderer') as MarkdownItRenderer | undefined;
    if (!markdownItRenderer) {
        throw new Error(`Could not load 'vscode.markdown-it-renderer'`);
    }

    // Load our Markdown-It extension
    const emoji = require('markdown-it-emoji');

    // Call the base renderer's extension method (extendMarkdownIt) to augment
    // the Markdown-It with emoji support.
    markdownItRenderer.extendMarkdownIt((md: MarkdownIt) => {
        return md.use(emoji, {});
    });
}

Der entscheidende Punkt hier ist, dass extendMarkdownIt einfach eine Methode ist, die vom Basis-Renderer zurückgegeben wird. Andere erweiterbare Renderer können leicht ihre eigenen Erweiterungspunkte zurückgeben.

Sehen Sie sich das Beispiel für die Erweiterung von Notebook-Renderern für ein vollständiges Beispiel zur Erweiterung des integrierten Markdown-It-Renderers von VS Code an.

Externe Dateien aus DataTransfers lesen

Erweiterungen können jetzt externe Dateien mithilfe eines DataTransfer lesen. Dies kann in der Tree-Drag-and-Drop-API sowie im Drop-in-Editor-API-Vorschlag verwendet werden.

export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscode.TreeDragAndDropController<Node> {

    public async handleDrop(target: Node | undefined, sources: vscode.DataTransfer, token: vscode.CancellationToken): Promise<void> {
        // Get a list of all files
        const files: vscode.DataTransferFile[] = [];
        sources.forEach((item) => {
            const file = item.asFile();
            if (file) {
                files.push(file);
            }
        });

        const decoder = new TextDecoder();

        // Print out the names and first 100 characters of the file
        for (const file of files) {
            const data = await file.data();
            const text = decoder.decode(data);
            const fileContentsPreview = text.slice(0, 100);
            console.log(file.name + ' — ' + fileContentsPreview + '\n');
        }

        ...
    }
}

Hoher Kontrast Hell in Webviews

Webviews können jetzt dunkle Farbschemata mit hohem Kontrast mit der CSS-Klasse vscode-high-contrast-light ansprechen.

.vscode-high-contrast-light .error {
    color: red;
}

Die Klasse vscode-high-contrast-light wird automatisch zum body-Element des Webviews hinzugefügt.

Icons in Test Item Labels

Codicons im Standardformat $(icon) können jetzt im TestItem.label verwendet werden, um Icons in der Test Explorer-Ansicht sowie in Testergebnissen anzuzeigen.

Aktivierung des Eingabefelds in der Quellcodeverwaltung

Erweiterungsautoren können nun die Aktivierung des Eingabefelds in der Quellcodeverwaltungsansicht über die Eigenschaft enabled steuern.

Änderung des JSON-Wortmusters

Jede Sprache verfügt über ein Wortmuster, das definiert, welche Zeichen zu einem Wort in dieser Sprache gehören. JSON unterschied sich von allen anderen Sprachen, da es die Anführungszeichen von Zeichenfolgen und den vollständigen Inhalt von Zeichenfolgen enthielt. Es folgt nun anderen Sprachen und enthält nur Buchstaben, Zahlen und Bindestriche.

Die Änderung behebt Probleme beim Erweitern der Auswahl (Befehl: Auswahl erweitern), ermöglicht Wortvervollständigungen innerhalb von Zeichenfolgen und behebt einige Abnormalitäten bei der Code-Vorschlagserstellung.

Erweiterungen, die sich auf das Wortmuster verlassen haben, z. B. für den Standard-Ersetzungsbereich bei Code-Vervollständigungen, müssen ihre Implementierung aktualisieren, um den Ersetzungsbereich für alle Vervollständigungen explizit anzugeben.

Debug Adapter Protocol

  • Um die Benutzererfahrung für die Funktion Step Into Target zu verbessern, wurden zusätzliche Informationen zum StepInTarget-Typ von DAP hinzugefügt. Mit den vier Eigenschaften line, column, endLine und endColumn kann ein Step-Into-Ziel nun mit dem entsprechenden Quellbereich verknüpft werden.
  • Die Übergabe von Programmargumenten an einen Debuggee wird durch zwei widersprüchliche Ziele behindert: Einige Benutzer möchten alle Zeichen an den Debuggee übergeben können, und andere Benutzer möchten einige Zeichen verwenden, um mit einer zugrunde liegenden Shell zu kommunizieren. Um beide Anwendungsfälle besser zu unterstützen, arbeiten wir am runInTerminal-Request von DAP, um die Maskierung von Sonderzeichen in Programmargumenten zu steuern. Ein Vorschlag ist bereits verfügbar. Wenn Sie ein Autor einer Debug-Erweiterung sind und an dieser DAP-Ergänzung interessiert sind, würden wir uns über Ihr Feedback freuen.
  • Darüber hinaus haben wir mehrere Dokumentationsprobleme des Debug Adapter Protocol behoben. Dazu gehören Klarstellungen zu den Begriffen "Clients" und "falsey", eine präzisere Spezifikation für Prüfsummen und Datumsangaben sowie eine verbesserte Formulierung für Source.origin.

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.

Paste Edit Provider

Wir haben den API-Vorschlag documentPaste aktualisiert, um die korrekte Implementierung zu erleichtern, insbesondere bei der Arbeit mit mehreren Cursorn.

Zur Erinnerung: Diese API ermöglicht es Erweiterungen, sich in das Kopieren und Einfügen in Texteditoren einzuhängen. Erweiterungen können sie verwenden, um den Text zu ändern, der beim Einfügen eingefügt wird. Das Beispiel für eine Dokumenteneinfüge-Erweiterung zeigt die aktualisierte API in Aktion.

/**
 * Provider that maintains a count of the number of times it has copied text.
 */
class CopyCountPasteEditProvider implements vscode.DocumentPasteEditProvider {
  private readonly countMimeTypes = 'application/vnd.code.copydemo-copy-count';

  private count = 0;

  prepareDocumentPaste?(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): void | Thenable<void> {
    dataTransfer.set(this.countMimeTypes, new vscode.DataTransferItem(this.count++));
    dataTransfer.set('text/plain', new vscode.DataTransferItem(this.count++));
  }

  async provideDocumentPasteEdits(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): Promise<vscode.DocumentPasteEdit | undefined> {
    const countDataTransferItem = dataTransfer.get(this.countMimeTypes);
    if (!countDataTransferItem) {
      return undefined;
    }

    const textDataTransferItem = dataTransfer.get('text') ?? dataTransfer.get('text/plain');
    if (!textDataTransferItem) {
      return undefined;
    }

    const count = await countDataTransferItem.asString();
    const text = await textDataTransferItem.asString();

    // Build a snippet to insert
    const snippet = new vscode.SnippetString();
    snippet.appendText(`(copy #${count}) ${text}`);

    return { insertText: snippet };
  }
}

export function activate(context: vscode.ExtensionContext) {
  // Enable our provider in plaintext files
  const selector: vscode.DocumentSelector = { language: 'plaintext' };

  // Register our provider
  context.subscriptions.push(
    vscode.languages.registerDocumentPasteEditProvider(
      selector,
      new CopyCountPasteEditProvider(),
      {
        pasteMimeTypes: ['text/plain']
      }
    )
  );
}

Zugriff auf WebUSB, WebSerial und WebHID im Web

Es gibt jetzt experimentelle Unterstützung für die Verwendung von WebUSB, Web Serial und WebHID aus Web-Erweiterungen.

Um auf diese APIs zuzugreifen, muss Ihre Erweiterung zunächst den Zugriff auf die gewünschten Geräte anfordern, indem sie einen der folgenden Befehle ausführt:

  • workbench.experimental.requestUsbDevice
  • workbench.experimental.requestSerialPort
  • workbench.experimental.requestHidDevice

Diese Befehle werden den Benutzer auffordern, ein Gerät auszuwählen. Jeder Befehl nimmt eine Liste von Gerätefiltern als Argument. Zum Beispiel:

import * as vscode from 'vscode';

await vscode.commands.executeCommand('workbench.experimental.requestUsbDevice', {
  filters: [
    { vendorId: 0x404 } // Your custom filter or empty if you want users to select any device
  ]
});

Nach Abschluss des Befehls kann Ihre Erweiterung die normalen Web-APIs verwenden, um auf alle Geräte zuzugreifen, denen der Benutzer Zugriff gewährt hat.

const devices = await navigator.usb.getDevices();
// Do something with devices

Alle normalen Web-Geräte-APIs sollten funktionieren, mit Ausnahme von denen wie requestDevice, die Benutzeroberflächenelemente für den Benutzer anzeigen müssen.

Derzeit funktioniert diese Funktionalität nur im Web und die Unterstützung ist auf die Browser Chrome und Edge beschränkt. Beachten Sie auch, dass diese Funktion noch experimentell ist, sodass wir ihr Design möglicherweise überarbeiten. Probieren Sie es aus und teilen Sie uns Ihr Feedback mit!

Technik

Update auf Electron 18

In diesem Meilenstein haben wir die Untersuchung abgeschlossen, Electron 18 in VS Code Desktop zu bündeln, und wir danken allen, die sich am Self-Hosting auf Insiders beteiligt haben. Dieses Update enthält Chromium 100.0.4896.160 und Node.js 16.13.2.

Dokumentation

TypeScript-Bearbeitung und Refactoring

Es gibt zwei neue Themen, die sich auf TypeScript Bearbeitung und Refactoring in VS Code konzentrieren. Dort lernen Sie spezifische Funktionen wie Inlay Hints, CodeLens und Formatierungsoptionen speziell für TypeScript sowie die verfügbaren Code- Refactorings.

Bemerkenswerte Fehlerbehebungen

  • 109565 Terminal zeigt immer Großbuchstaben an, wenn Caps Lock zum Wechseln der Eingabequelle verwendet wird
  • 146491 Farbunterschied zwischen aktivem und inaktivem Menü verloren
  • 149538 Anmeldung bei Microsoft- oder GitHub-Konto in China nicht möglich
  • 149890 Ein Element kann nicht per Drag & Drop in eine leere Baumansicht gezogen werden
  • 150934 RPM sollte gebündelte Bibliotheken nicht als "provides" auflisten
  • 151158 Ausgewählter Kernel im unbenannten Notebook beibehalten, wenn das Notebook gespeichert wird
  • 151664 Effizienz von Ankündigungen beim schrittweisen Durchlaufen von Code mit Screenreadern verbessern
  • 151739 workbench.action.submitComment ist nicht funktionsfähig, wenn zum ersten Mal auf einen Kommentar-Thread geantwortet wird & verwirrend beim Bearbeiten von Kommentaren
  • 152067 Kommentar-Thread-Bereich nur anzeigen, wenn der Kommentar erweitert ist
  • 152141 Task-Status verwerfen, wenn der Prozess beendet wird
  • 152642 Schaltfläche zum Entfernen von Watch-Ausdrücken mit einem einzigen Klick hinzugefügt

Vielen Dank

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

Web-Erweiterungen

Erweiterungsautoren, die Erweiterungen ermöglichen, die Code als Web-Erweiterungen ausführen (die Liste unten ist vom 7. Juni bis 4. Juli 2022)

Fehlerverfolgung

Beiträge zu unserer Fehlerverfolgung

Pull-Anfragen

Beiträge zu vscode

Beiträge zu vscode-generator-code

Beiträge zu vscode-js-debug

Beiträge zu vscode-pull-request-github

Beiträge zu debug-adapter-protocol

Beiträge zu devcontainers/cli

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