Erweiterung von Visual Studio Code verwenden

Visual Studio Code ist ein unkomplizierter, leistungsstarker Quellcode-Editor für Windows, macOS und Linux. Er unterstützt JavaScript, TypeScript und Node.js und verfügt über ein umfangreiches Ökosystem aus Erweiterungen für andere Sprachen wie C++, C, Java, Python, PHP und Go und Laufzeiten wie .NET und Unity. Weitere Informationen zu Visual Studio Code finden Sie unter Erste Schritte mit VS Code.

Visual Studio Code macht es möglich, dass Sie Ihre Fähigkeiten über Erweiterungen erweitern können. Visual Studio Code-Erweiterungen können der Gesamtumgebung weitere Funktionen hinzufügen. Mit der Veröffentlichung dieser Funktion können Sie jetzt die Visual Studio Code-Erweiterung mit Power Pages verwenden.

Visual Studio Code-Erweiterung für Power Pages

Die Power Platform Tools fügen die Funktionalität hinzu, Websites mithilfe von Visual Studio 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 Visual Studio Code angepasst wird. Mit der Visual Studio Codeerweiterung können Sie Portale auch über die Microsoft Power Platform CLI konfigurieren.

Anmerkung

• Damit Power Pages-Features funktionieren, muss node.js heruntergeladen und auf derselben Arbeitsstation wie Visual Studio Code installiert sein.
• Stellen Sie sicher, dass nur Power Platform Tools installiert sind und nicht Power Platform Tools und Power Platform Tools [VORSCHAUVERSION]. Details finden Sie unter Bekannte Probleme.

Anforderungen

Vor der Verwendung der Visual Studio Code-Erweiterung für Power Pages Portale müssen Sie:

• Visual Studio Code herunterladen, installieren und konfigurieren. Weitere Informationen: Laden Sie Visual Studio Code herunter

• Konfigurieren Sie Ihre Umgebung und Ihr System für Power Pages-CI/CD-Unterstützung mithilfe von CLI. Weitere Informationen: Microsoft Power Platform CLI (Vorschauversion)

Visual Studio Code-Erweiterung installieren

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

So installieren Sie die Visual Studio Code-Erweiterung:

1. Öffnen Sie Visual Studio Code.

2. Wählen Sie im linken Bereich Erweiterungen aus.

   

3. Wählen Sie das Symbol Einstellungen oben rechts im Erweiterungsbereich.

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

   

5. Wählen Sie Installieren aus.

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

Tipp

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

Power Pages Aktionen

Power Pages-Aktionen optimieren die Websiteverwaltung und verringern die Abhängigkeit von Microsoft Power Platform CLI-Befehlen. Power Pages-Aktionen sind im Bereich Power Pages-Aktionen in der Explorer-Randleiste von Visual Studio Code verfügbar.

In diesem Bereich werden Websites wie folgt kategorisiert:

• Aktive Websites: Websites, die derzeit in der ausgewählten Umgebung verfügbar und aktiv sind.
• Interaktive Websites: Websites, die in der Umgebung verfügbar, aber derzeit nicht aktiv sind.
• Andere Websites: Websites, die lokal heruntergeladen, aber noch nicht mit der ausgewählten Umgebung verknüpft wurden.

Umgebungen ändern

Wechseln Sie wie folgt zwischen Umgebungen:

1. Wählen Sie die Schaltfläche Umgebung ändern im Bereich „Aktionen“ von Power Pages aus.

   

2. Wählen Sie die gewünschte Umgebung aus der ausgegebenen Liste aus.

Wenn Sie eine Umgebung auswählen, wird die Liste der Websites automatisch aktualisiert.

Aktionen für Websites

Verschiedene Arten von Websites bieten kontextspezifische Aktionen, auf die Sie durch Rechtsklick zugreifen können.

Aktionen „Aktive Websites“

Klicken Sie mit der rechten Maustaste auf „Aktive Websites“, um auf die folgenden Aktionen zuzugreifen:

• Vorschau: Löscht den Cache und öffnet die Website in VS Code für die sofortige Vorschau.
• Hochladen: Lädt lokale Änderungen wieder in Ihre Umgebung hoch.
• Herunterladen: Lädt den Websiteinhalt zur Offlinebearbeitung in einen lokalen Ordner herunter.
• Websitedetails: Enthalten detaillierte Informationen über die Website.
• Im Explorer anzeigen: Navigiert zu dem lokalen Verzeichnis, das den Code der Website enthält.
• In Power Pages Studio öffnen: Öffnet die Website in Power Pages Studio.

Inaktive Websiteaktionen

Inaktive Websites bieten die folgenden Aktionen:

• Websiteverwaltung öffnen: Öffnet die Website in der Power Pages Management-Anwendung.
• Websitedetails: Stellt detaillierte Informationen über die ausgewählte Website bereit, z. B. Website-ID, Website-URL, Datenmodellversion und mehr.

Andere Website-Aktionen

Websites, die lokal gespeichert, aber noch nicht in Ihrer Umgebung sind, bieten die folgenden Aktionen:

• Website hochladen: Lädt die lokale Website in Ihre verbundene Umgebung hoch. Nach dem Hochladen wird die Website in der Liste der inaktiven Websites angezeigt, wo Sie sie von der Power Pages-Startseite aus aktivieren können.
• Im Explorer anzeigen: Navigiert zu dem lokalen Verzeichnis, das den Code der Website enthält.

Dateisymbole

Die Visual Studio Code-Erweiterung für Power Pages identifiziert und zeigt automatisch Symbole für Dateien und Ordner im heruntergeladenen Websiteinhalt an.

Visual Studio Code verwendet die Standardeinstellung Dateisymbol-Thema, die keine Power Pages spezifischen Symbole anzeigt. Um für Ihre Websites spezifische Dateisymbole anzuzeigen, müssen Sie die Visual Studio Code-Instanz aktualisieren, um das für Power Pages spezifische Dateisymboldesign zu verwenden.

So aktivieren Sie ein portalspezifisches Dateisymboldesign:

1. Öffnen Sie Visual Studio Code.

2. Gehen Sie zu Datei>Präferenzen>Thema>Dateisymbolthema

3. Wählen Sie das Design für die PowerApps Portalsymbole aus.

   

Website-Vorschau

Die Vorschauaktion verwendet die Microsoft Edge DevTools-Erweiterung für Visual Studio Code, um eine Vorschau der Website im Editor bereitzustellen. Dieses Feature führt Microsoft Edge-DevTools und einen eingebetteten Microsoft Edge-Browser mit Geräteemulation direkt in VS Code aus, sodass Sie fast alle Debuggen- und Inspektionsfunktionen der vollständigen Microsoft Edge-DevTools nutzen können.

In der Vorschau werden immer die Änderungen angezeigt, die Sie auf Ihre Website hochgeladen haben. Stellen Sie also sicher, dass Sie alle lokalen Änderungen übertragen, bevor Sie sie öffnen. Jedes Mal, wenn Sie die Vorschauversion starten, wird der Websitecache automatisch gelöscht, um sicherzustellen, dass Sie die neuesten Updates sehen.

Um die Vorschau zu öffnen, klicken Sie mit der rechten Maustaste unterhalb von Power Pages-Aktionen auf Ihre aktive Website und wählen Sie Vorschau aus. Diese Aktion öffnet den eingebetteten Microsoft Edge-Browser, der auf die von Ihnen ausgewählte Website verweist.

Das Vorschaufenster wird auf der rechten Seite geöffnet.

AutoVervollständigen

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

Liquid-Tags

Beim Anpassen heruntergeladener Inhalte mit Visual Studio Code können Sie jetzt Liquid-Stichworte mit IntelliSense für Power Pages verwenden.

Beginnen Sie mit der Eingabe, um eine Liste der Liquid-Tags anzuzeigen. Wählen Sie ein Tag aus, um es korrekt zu formatieren und mit Ihrer Eingabe fortzufahren.

Liquid-Objekte

Sie können Liquid Object Codevervollständigungen anzeigen, indem Sie {{ }} eingeben. Während sich der Cursor zwischen den Klammern befindet, wählen Sie <CTRL + space> , um eine Liste mit Liquid-Objekten anzuzeigen, die Sie auswählen können. Wenn das Objekt mehr Eigenschaften hat, können Sie ein . eingeben und dann <CTRL + space> erneut auswählen, um bestimmte Eigenschaften des Liquid-Objekts anzuzeigen.

Vorlagentags

Sie können Power Pages Vorschläge für Webvorlagen anzeigen, indem Sie den Cursor in die {include ' '} Anweisung platzieren und <CTRL> - space auswählen. Es wird eine Liste der vorhandenen Webvorlagen angezeigt, die Sie auswählen können.

Website-Objekte erstellen, löschen und umbenennen

Innerhalb von Visual Studio Code können Sie die folgenden Website-Komponenten erstellen, löschen und umbenennen:

• Webseiten
• Seitenvorlagen
• Webvorlagen
• Inhalts-Snippets
• Neue Assets (Webdateien)

Vorgänge erstellen

Über die Kontextmenüoptionen können Sie neue Website-Komponenten erstellen. Klicken Sie mit der rechten Maustaste auf eines der unterstützten Objekte und wählen Sie Power Pages und dann den Website-Objekttyp aus, den Sie erstellen möchten.

Alternativ können Sie die verwenden Visual Studio Code-Befehlspalette durch Auswahl Ctrl + Shift + P verwenden.

Sie müssen weitere Parameter angeben, um das Objekt zu erstellen.

Object	Parameter
Webseiten	Name, Seitenvorlage, übergeordnete Seite
Seitenvorlagen	Name, Webvorlage
Webvorlagen	Name des Dataflows
Inhalts-Snippets	Name und ob das Snippet HTML oder Text sein soll.
Neue Assets (Webdateien)	Name, übergeordnete Seite und Datei zum Hochladen auswählen.

Vorgänge umbenennen und löschen

Aus der Dateinavigation heraus können Sie über das Kontextmenü Power Pages Komponenten umbenennen oder löschen.

Anmerkung

Gelöschte Objekte können aus dem Desktop-Papierkorb wiederhergestellt werden.

Einschränkungen

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

• AutoVervollständigen-Features unterstützen nur eine eingeschränkte Funktionalität.

Verwandte Informationen

Power Pages-Unterstützung für Microsoft Power Platform CLI (Vorschauversion)