Erweiterung von Visual Studio Code verwenden

  • Artikel

Hinweis

Ab 12. Oktober 2022 ist Power Apps-Portale Power Pages. Weitere Informationen: Microsoft Power Pages ist jetzt allgemein verfügbar (Blog)
Wir werden die in Kürze migrieren und die Dokumentation für Power Apps-Portale mit der Power Pages-Dokumentation zusammenführen.

Überblick

Visual Studio Code (VS Code) ist ein leichter, aber leistungsstarker Quellcode-Editor, der auf Ihrem Desktop ausgeführt wird und für Windows, macOS und Linux verfügbar ist. Es kommt mit integrierter Unterstützung für JavaScript, TypeScript und Node.js und verfügt über ein reichhaltiges Ökosystem von Erweiterungen für andere Sprachen (wie C++, C#, Java, Python, PHP und Go) und Laufzeiten (wie .NET und Unity). Weitere Informationen finden Sie unter Erste Schritte mit VS Code.

Mit VS Code können Sie Ihre Fähigkeiten erweitern durch Erweiterungen. VS Code-Erweiterungen können der Gesamtumgebung weitere Funktionen hinzufügen. Mit der Veröffentlichung dieser Funktion können Sie jetzt die VS Code-Erweiterung verwenden, um mit Power Apps-Portalen zu arbeiten.

VS Code-Erweiterung für Portale

Die Power Platform Tools fügen die Funktionalität hinzu, Portale mit VS Code zu konfigurieren und die integrierte Liquid-Sprache IntelliSense zu verwenden, die Hilfe mit Code-Vervollständigung, Unterstützung und Hinweisen ermöglicht, während die Schnittstelle der Portale mit VS Code angepasst wird. Mit der VS Code-Erweiterung können Sie Portale auch über die Portalunterstützung für Microsoft Power Platform CLI konfigurieren.

Animation, die Ihnen erklärt, wie Sie Power Platform Tools mit dem Design von Dateisymbolen installieren und festlegen

Anforderungen

Vor der Verwendung der VS Code-Erweiterung für Power Apps Portale müssen Sie:

VS Code-Erweiterung installieren

Nach der Installation von Visual Studio Code müssen Sie die Erweiterung für die Power Apps Portale-Plug-In für VS Code installieren.

So installieren Sie die VS Code-Erweiterung:

  1. Öffnen Sie Visual Studio Code.

  2. Wählen Sie Erweiterungen-Symbol. (Erweiterungen) aus dem linken Bereich aus.

    Erweiterungen auswählen

  3. Wählen Sie Einstellungssymbol oben rechts im Erweiterungsbereich aus.

  4. Suchen Sie nach Power Platform Tools und wählen Sie diese aus.

    Wählen Sie Power Platform Tools.

  5. Wählen Sie Installieren aus.

  6. Überprüfen Sie anhand der Statusmeldungen, ob die Erweiterung erfolgreich installiert wurde.

Portalinhalte herunterladen

Informationen zur Authentifizierung einer Microsoft Dataverse-Umgebung und zum Herunterladen von Portalinhalten finden Sie im Tutorial Microsoft Power Platform CLI mit Portalen benutzen – Portalinhalte herunterladen.

Tipp

Die Erweiterung Power Platform Tools ermöglicht automatisch die Verwendung von Microsoft Power Platform CLI-Befehlen aus VS Code heraus über Visual Studio Integrated Terminal.

Ausschnitt-Support

Beim Anpassen heruntergeladener Inhalte mit VS Code können Sie jetzt Liquid-Stichworte mit IntelliSense für Power Apps-Portale verwenden.

Ausschnitt mit einem Beispiel für die Vervollständigung des Entitäts-Liquid-Tags.

Dateisymbole

Die VS Code-Erweiterung für Portale identifiziert und zeigt Symbole für Dateien und Ordner im heruntergeladenen Portalinhalt automatisch an.

Liste der Dateien in einem Starter-Portal mit portalspezifischem Dateisymboldesign.

VS Code verwendet die Standardeinstellung Dateisymbol Thema, die keine portalspezifischen Symbole anzeigt. Um für Ihre Portale spezifische Dateisymbole anzuzeigen, müssen Sie die VS Code-Instanz aktualisieren, um das portalspezifische Dateisymboldesign zu verwenden.

So aktivieren Sie ein portalspezifisches Dateisymboldesign:

  1. Öffnen Sie Visual Studio Code.

  2. Gehen Sie zu Datei > Einstellungen > Dateisymboldesign

  3. Wählen Sie das Design für die Power Apps Portalesymbole aus.

    Design für Power Apps Portalesymbole auswählen.

Livevorschau

Die Visual Studio Codeerweiterung ermöglicht eine Live-Vorschauoption zum Anzeigen der Inhaltsseite des Portals innerhalb der Visual Studio Codeschnittstelle während der Entwicklungserfahrung.

Um die Vorschau anzuzeigen, wählen Sie Vorschau-Schaltfläche oben rechts aus, wenn eine HTML-Datei in Bearbeitungsmodus geöffnet ist.

Seitenvorschau

Der Vorschaubereich wird auf der rechten Seite der bearbeiteten Seite geöffnet.

Ein Bildschirm mit Dateiliste, geöffneter Datei im VS Code-Editor und einer Vorschau auf der rechten Seite.

Die Vorschaufunktion erfordert, dass die anderen Dateien auch in derselben VS Code-Sitzung geöffnet sind, aus denen das HTML-Markup für die Anzeige der Vorschau besteht. Wenn beispielsweise nur die HTML-Datei geöffnet wird, ohne dass die Ordnerstruktur mit VS Code geöffnet wurde, wird die folgende Meldung angezeigt.

Das Ausführen des beigesteuerten Befehls: „microsoft-powerapps-Portals.preview-show“ ist fehlgeschlagen.

Wenn dieses Problem auftritt, öffnen Sie den Ordner mit Datei > Ordner öffnen und wählen Sie den heruntergeladenen Portalinhaltsordner aus, um ihn zu öffnen, bevor Sie erneut versuchen, eine Vorschau anzuzeigen.

AutoVervollständigen

Die Autovervollständigungsfunktion in der VS Code-Erweiterung zeigt den aktuell bearbeiteten Kontext und die relevanten Autovervollständigungselemente über IntelliSense an.

Ein Beispiel für die automatische Vervollständigung für die Seitenvorlagen-ID.

Einschränkungen

Die folgenden Einschränkungen gelten derzeit für die Power Platform Tools für Portale:

Siehe auch

Portalunterstützung für Microsoft Power Platform CLI (Vorschauversion)