VS Code für das Web - Azure

VS Code für das Web ist eine installationsfreie und browserbasierte Version von Visual Studio Code. Die Umgebung /azure (kurz für /azure) ist über https://vscode.dev/azure erreichbar und ist ein spezieller Bereich für die Azure-Entwicklung, mit dem Sie Anwendungen in Sekundenschnelle für Azure ausführen, debuggen und bereitstellen können.

Diese Umgebung wird von Azure Cloud Shell unterstützt und bietet bis zu **4 Stunden Rechenzeit**, wodurch die manuelle Konfiguration von Entwicklungsumgebungen oder die Installation von Abhängigkeiten entfällt. /azure ist mit den neuesten Bibliotheken, Erweiterungen und Tools vorinstalliert, damit Sie sofort mit dem Codieren beginnen können.

Erste Schritte

Die /azure-Umgebung enthält alles, was Sie für die Entwicklung und Bereitstellung von Azure-Anwendungen benötigen

Vorinstallierte Erweiterungen

Azure Developer CLI – Diese Erweiterung erleichtert die Ausführung, Erstellung von Azure-Ressourcen und Bereitstellung von Azure-Anwendungen mit der Azure Developer CLI.

Unterstützte Programmiersprachen

Alle wichtigen Laufzeitumgebungen sind vorinstalliert

• Python - 3.12.9
• Java - openjdk 17.0.16 2025-07-15 LTS
  • OpenJDK Runtime Environment Microsoft-11926113 (Build 17.0.16+8-LTS)
  • OpenJDK 64-Bit Server VM Microsoft-11926113 (Build 17.0.16+8-LTS, Mixed Mode, Sharing)
• Node.js - v20.14.0
• C# - 9.0.304

GitHub-Repositorys

Committen Sie Ihre Änderungen nahtlos direkt in Ihr GitHub-Repository mit der GitHub Repository-Erweiterung. GitHub Repositories ermöglicht es Ihnen, ein Repository direkt aus dem Editor heraus fernzugreifen und zu bearbeiten, ohne Code auf Ihren lokalen Rechner herunterladen zu müssen. Weitere Informationen zur Erweiterung und ihrer Funktionsweise finden Sie in unserem Leitfaden zu GitHub Repositories.

Arbeiten Sie weiter in VS Code auf dem Desktop

Nachdem die Azure Cloud Shell Containerzeit abgelaufen ist, möchten Sie Ihre Arbeit möglicherweise in VS Code auf dem Desktop fortsetzen. Verwenden Sie die Schaltfläche **Weiterarbeiten auf** in der Statusleiste von VS Code für das Web, um Ihren Code in ein ausgewähltes GitHub-Repository zu committen und zu Ihrer lokalen Umgebung zu wechseln.

Innerhalb dieser Erfahrung haben Sie zwei Optionen für die lokale Fortsetzung

• Verwendung von Docker: Starten Sie einen vorkonfigurierten Entwicklungcontainer.
• Verwendung von VS Code lokal: Klonen Sie das Repository und konfigurieren Sie Ihre Umgebung mithilfe einer README-Datei.

Azure-Einstiegspunkte

Die /azure-Umgebung integriert sich in Microsoft Foundry, um Code näher an die Entwickler zu bringen. Schaltflächen wie **In VS Code für das Web öffnen** sind direkt in Umgebungen wie dem **Chat Playground**, dem **Agent Playground** und der **Microsoft Foundry-Homepage** verfügbar. Weitere Informationen finden Sie im Abschnitt Beispielhafte Anwendungsfälle oder Szenarien.

Erste Schritte

1. Wählen Sie ein Modell.
2. Erstellen und testen Sie Ihren Agenten.
3. Wählen Sie **Code anzeigen** und dann Ihre Programmiersprache und Ihr SDK aus.
4. Starten Sie mit der Schaltfläche **In VS Code öffnen** für das Web mit **einem Klick** direkt in VS Code.

Alternativ können Sie einen Agenten von der Microsoft Foundry-Homepage aus erstellen

1. Öffnen Sie die Microsoft Foundry-Homepage (https://ai.azure.com)
2. Sehen Sie sich den vorgeschlagenen Codeausschnitt an, der auf der Homepage generiert wurde
3. Wählen Sie **In VS Code öffnen** für eine Ein-Klick-Erfahrung, um einen Agenten basierend auf dem generierten Code zu erstellen

Zusätzlich können Entwickler mit Vorlagen aus der AI App Gallery (https://aka.ms/aiapps) beginnen und **In VS Code öffnen** auswählen, um ihre Vorlage in einer einzigen Operation in die /azure-Umgebung zu starten.

Erste Schritte

1. Navigieren Sie zur AI App Gallery (https://aka.ms/aiapps)
2. Wählen Sie eine Vorlage aus oder suchen Sie nach einer Vorlage, die Sie ausführen möchten
3. Wählen Sie im Dropdown-Menü **In VS Code öffnen** aus
4. Starten Sie direkt in VS Code und verwenden Sie GitHub Copilot, um alle Ihre Fragen zu beantworten.

Wir haben auch Integrationen mit dem Azure-Portal. Entwickler können jetzt auf eine Schaltfläche "In VS Code öffnen" von Azure Copilot zugreifen, wenn sie Code generieren.

Erste Schritte

1. Öffnen Sie das Azure-Portal und melden Sie sich mit Ihrem Azure-Konto an
2. Navigieren Sie zu Azure Copilot und beginnen Sie mit der Entwicklung eines Szenarios, das Sie erstellen möchten
3. Sobald Copilot Code generiert hat, wählen Sie die generierte Codedatei aus und dann **In VS Code öffnen**
4. Starten Sie direkt in VS Code und verwenden Sie GitHub Copilot, um weitere Fragen zu beantworten.

Beispielhafte Anwendungsfälle oder Szenarien

Die folgenden sind häufig verwendete Szenarien für die /azure-Umgebung.

• Erstellung eines Agenten mit Microsoft Foundry

  1. Greifen Sie auf das Microsoft Foundry NextGen-Portal zu und wählen Sie neben dem für Ihren Agenten generierten Code **In VS Code öffnen** aus
  2. Lassen Sie die VS Code für das Web – Azure-Umgebung Ihren Arbeitsbereich initialisieren und einrichten
  3. Lesen Sie die README-Datei und folgen Sie den Schritten, um die Datei **create_and_run_agent.py** auszuführen
  4. Ihr Agent wird erfolgreich erstellt und ausgeführt! Verwenden Sie weiterhin die Foundry Extension (vorinstalliert), um Ihren Agenten zu verfeinern, oder folgen Sie den nachstehenden Schritten, um eine Anwendung mit Ihrem Agenten zu erstellen

• Erstellung einer Modellbereitstellung mit Microsoft Foundry und Öffnen Ihres Codes in VS Code

  1. Wählen Sie im Microsoft Foundry-Portal das beste Modell für Ihren Anwendungsfall aus, einschließlich o3, o4-mini oder MAI-DS-R1 von Foundry Models. In diesem Fall verwenden wir gpt-4o-mini als Beispielmodell für einen Agenten-Workflow.

     

  2. Stellen Sie den Modellendpunkt von der gpt-4o-mini Modellkarte bereit.

     

  3. Rufen Sie den Agenten-Playground auf, ändern Sie Generierungseinstellungen wie max. Antworten und frühere Nachrichten. Fügen Sie Wissen, Tools und Aktionen hinzu.

     

  4. Iterieren Sie über Ihre Beispiel-Prompt und experimentieren Sie weiter im Agenten-Playground.

  5. Wenn Sie zufrieden sind, wählen Sie die Schaltfläche **Code anzeigen**, um das kontextbezogene Codebeispiel für Ihre Interaktion mit dem Agenten im Agenten-Playground anzuzeigen.

     

     Dort finden Sie mehrsprachige Codebeispiele in Python, C# und JavaScript für Agenten sowie mit JSON, cURL, JavaScript, C# und Go für Modelle. Entra ID kann zur Authentifizierung von Agenten mit "Schlüsselautorisierung" verwendet werden, die jetzt für Modelle verfügbar ist.

     

  6. Wenn Sie bereit sind, wählen Sie **In VS Code öffnen** und werden Sie zur /azure-Umgebung von VS Code für das Web weitergeleitet.

     

     Sie werden feststellen, dass beim Einrichten der Umgebung der Beispielcode, der API-Endpunkt und der Schlüssel automatisch in einen neuen VS Code für das Web-Arbeitsbereich importiert werden.

     

     In der unteren rechten Ecke sehen Sie, dass der API-Schlüssel in den Umgebungsvariablen des Terminals festgelegt ist und dass der Beispielcode erfolgreich heruntergeladen wurde.

     

  7. Führen Sie das Modell lokal über das Terminal mit python agent_run.py aus. Innerhalb von Sekunden sehen Sie eine erfolgreiche Modellantwort.

     

  8. azd-Befehle können verwendet werden, um eine Web-App mit dem Agenten bereitzustellen. azd init initialisiert das Git-Repository, das einen Standard-Azure-Arbeitsbereich erstellt, in dem der Agent in einer Anwendung verwendet werden kann.

     

  9. azd up stellt die Web-App bereit und erstellt die relevanten Azure-Ressourcen. Sobald dies erledigt ist, können Sie Ihre Anwendung im Browser sehen, indem Sie auf den Link im Terminal klicken

     

  10. Fahren Sie in VS Code auf dem Desktop oder GitHub Desktop fort, indem Sie in der unteren linken Ecke auf "Auf Desktop fortsetzen" klicken. Diese Schaltfläche ermöglicht es Ihnen, Ihren Arbeitsbereich mit einer einzigen Operation in Ihre lokale Umgebung zu verschieben. Wenn Sie einen Entwicklungscontainer an eine bestehende Anwendung angehängt haben, haben Sie die Wahl, ob Sie diesen Container oder Ihre lokale Umgebung verschieben möchten.

      

• Schnelles Aufspannen einer Azure Function App

  Der obige Schnellstart ist für vscode.dev/azure relevant, da vscode.dev/azure alle Voraussetzungen erfüllt

  • Installiertes Python
  • Installierte Azure Functions Core Tools
  • Diese müssen Sie selbst installieren
  • Azure Functions-Erweiterung

• Erstellen und Testen eines KI-Agenten mit dem AI Toolkit

  Hauptfunktionen

  • Modellkatalog mit umfangreichen Generative AI-Modellquellen (GitHub, ONNX, OpenAI, Anthropic, Google, ...)
  • Eigene Modelle von remote gehosteten Modellen oder lokal laufenden Ollama-Modellen mitbringen
  • Playground für Modellinferenz oder Tests über Chat
  • Anhangsunterstützung für multimodale Sprachmodelle
  • Stapelverarbeitung von Prompts für ausgewählte KI-Modelle
  • Bewerten Sie ein KI-Modell mit einem Datensatz für unterstützte beliebte Evaluatoren wie F1-Score, Relevanz, Ähnlichkeit, Kohärenz und mehr

• Schnelles Prototyping mit VS Code-Erweiterungen und Python

• Erstellen, Bearbeiten und Bereitstellen von Agenten mit Azure Copilot

Einschränkungen

Obwohl VS Code für das Web fast die gleichen Funktionen wie VS Code auf dem Desktop bietet, gibt es einige Einschränkungen der Entwicklungsumgebung

• Kein Terminalzugriff über Cloud Shell hinaus
• Begrenzte Unterstützung für einige native Erweiterungen oder Sprachfunktionen
• Keine Offline-Unterstützung

Fehlerbehebung

Wenn Sie Probleme mit VS Code für das Web – Azure haben, loggen Sie bitte ein Problem in unserem GitHub-Repository

Verbindungsproblem

Wenn Sie keine Verbindung zu https://vscode.dev/azure herstellen können, können Sie dies normalerweise beheben, indem Sie Ihre Azure Cloud Shell zurücksetzen. Dies kann über das Azure-Portal erfolgen.

Öffnen Sie die Cloud Shell im Azure-Portal über die Schaltfläche oben rechts.

Wählen Sie anschließend im Dropdown-Menü Einstellungen **Benutzereinstellungen zurücksetzen** aus.

Sobald dies abgeschlossen ist, sollten Sie diesen Bildschirm sehen.

Sammeln von Protokollen

Die Erweiterungsprotokolle helfen uns bei der Diagnose von Problemen mit vscode.dev/azure. Sie können darauf zugreifen, indem Sie zur Ansicht "Ausgabe" wechseln und dann den Ausgabekanal **VS Code für das Web – Azure** auswählen.

Verwandte Ressourcen

Lernen und erforschen Sie weiter mit den folgenden Ressourcen

• Dokumentation zur Azure Developer CLI
• GitHub Copilot
• Azure AI Studio
• VS Code Dev Containers

Feedback und Support

Erstellen Sie Probleme in unserem GitHub-Repository, wenn Sie diese bei der Verwendung von vscode.dev/azure feststellen. Je mehr Details, desto besser. Fügen Sie nach Möglichkeit Protokolle aus dem Ausgabekanal "VS Code für das Web – Azure" hinzu.