Code mit Visual Studio Code für das Web bearbeiten (Vorschauversion)

[Dieses Thema ist Teil der Dokumentation zur Vorabversion und kann geändert werden.]

Im Design Studio können Sie den Site-Code mit Visual Studio Code für das Web bearbeiten. Mit dieser Funktion können Sie den statischen Inhalt, HTML, CSS, Liquid und JavaScript für die folgenden Website-Metadaten bearbeiten:

Metadata Inhalt
Erweiterte Formulare (mehrstufige Formulare) JavaScript
Basisformulare JavaScript
Inhaltsausschnitte Alle unterstützten Inhaltsausschnitte
Listen JavaScript
Webdateien Sie können Mediendateien ansehen und herunterladen. Sie können Textdateien (Code) bearbeiten.
Webseiten Alle unterstützten Inhalte (pro Sprache), JavaScript und CSS
Webvorlagen Alle unterstützten Inhalte

Anmerkung

Sie können keine Metadatensätze erstellen, sondern nur Inhalte und Code hinzufügen und bearbeiten sowie Dateianhänge anzeigen/herunterladen.

Visual Studio Code für das Web bietet eine kostenlose, Microsoft Visual Studio Codeerfahrung ohne Installation, die vollständig in Ihrem Browser ausgeführt wird, sodass Sie Site-Code durchsuchen und leichtgewichtige Codeänderungen schnell und sicher vornehmen können. Weitere Informationen: Visual Studio Code für das Web-Erfahrung.

Wichtig

  • Dies ist eine Vorschauversion.
  • Funktionen in der Vorschau sind nicht für den Produktionseinsatz gedacht und können eine eingeschränkte Funktionalität aufweisen. Diese Funktionen stehen vor der offiziellen Veröffentlichung zur Verfügung, damit Kunden frühzeitig Zugriff erhalten und Feedback geben können.

Demo der Verwendung von Visual Studio Code für Web zur Bearbeitung von Power Pages Website.

Notiz

  • Das erstmalige Laden von Visual Studio Code für das Web kann einige Zeit dauern, da erforderliche Erweiterungen für diese Funktion installiert werden.
  • Vorgänge zum Erstellen, Löschen und Umbenennen werden nicht unterstützt.
  • Diese Funktion nutzt Power Platform Tools Web-Erweiterung. Weberweiterungen werden durch die Browser-Sandbox eingeschränkt und haben daher Einschränkungen im Vergleich zu normalen Erweiterungen.
    • Power Platform CLI wird nicht unterstützt.
    • Die Funktionen der Power Platform Tools-Weberweiterung sind begrenzt auf Power Pages-Codebearbeitungserfahrung.
    • Diese Funktion ist in Government Community Cloud (GCC), Government Community Cloud (GCC High) und Department of Defense (DoD) nicht verfügbar. Benutzer in diesen Regionen verwenden die Portals Management App zum Bearbeiten von Code. Weitere Informationen finden Sie unter Code in der Portalverwaltungs-App bearbeiten .

Code bearbeiten, der im Designstudio verfügbar ist

Sie können mit der Bearbeitung des Codes Ihrer Website mit Visual Studio Code für das Web auf der Power Pages-Startseite beginnen, indem Sie die Option Websitecode bearbeiten aus dem Dropdown-Menü Bearbeiten auswählen.

Sie können den Code auch im Designstudio in den folgenden Bereichen bearbeiten:

Sehen wir uns an, wie Sie Code mit diesen Bereichen bearbeiten.

Webseitencode aus Arbeitsbereich Seiten bearbeiten

Wenn Sie das Power Pages-Designstudio öffnen, sehen Sie die Option Code bearbeiten im Seitenmenü1 und in der oberen rechten Ecke der Anzeige2.

Code aus Arbeitsbereich Seiten bearbeiten.

Header-Vorlagencode aus dem Seiten-Arbeitsbereich

Wählen Sie Website-Header bearbeiten und dann Code bearbeiten aus, um den Code-Editor zu öffnen.

Code aus dem Header Seiten bearbeiten.

Benutzerdefinierten CSS Code aus Styling-Arbeitsbereich bearbeiten

Gehen Sie zum Styling-Arbeitsbereich und wählen Sie das verfügbare, benutzerdefinierte CSS Code bearbeiten Menü, um den Code-Editor zu öffnen.

Code aus dem Zoll CSS anpassen.

Konfliktbenachrichtigung zusammenführen

Wenn Sie mit anderen Entwicklern zusammenarbeiten, kann es Situationen geben, in denen Sie am selben Quellcode arbeiten. Falls Sie versuchen, Änderungen an einer veralteten Datei zu speichern, erhalten Sie eine Benachrichtigung zum Vergleichen oder Überschreiben von Änderungen.

Durch den Vergleich des Codes wird der aktuelle Code neben Ihrem Code angezeigt und Sie können zu den vorhandenen Änderungen zurückkehren, jede Änderung einzeln akzeptieren oder Ihre Änderungen verwenden und den vorhandenen Inhalt überschreiben.

Konflikte im Code zusammenführen

Sie können den neuesten Inhalt überprüfen und den Code entweder zusammenführen oder überschreiben oder die Änderungen verwerfen.

Tutorial: Website-Code mit Visual Studio Code für das Web bearbeiten

In diesem Tutorial erfahren Sie, wie Sie den Websitecode mithilfe von Visual Studio Code für das Web bearbeiten.

Schritt 1: Websitecode mit Visual Studio Code für das Web bearbeiten

  1. Öffnen Sie Ihre Website in Power Pages Designstudio

  2. Wählen Sie in der oberen rechten Ecke Code bearbeiten

    Öffnen Sie in Visual Studio Code aus dem Design Studio.

  3. Wählen Sie Visual Studio Code öffnen aus dem Bestätigungsdialog.

  4. Melden Sie sich bei Visual Studio Code mit Ihren Anmeldeinformationen an.

  5. Warten Sie auf die Initialisierung von Power Platform Tools Weberweiterung und das Laden des Webseitencodes im linken Bereich.

Schritt 2: Inhalt und Code aktualisieren

  1. Der Explorer auf der linken Seite des Bildschirms lädt entsprechende Website-Konfigurationsmetadaten, die mit Visual Code für das Web bearbeitet werden können.

    Explorer-Menü für einen unbenannten Arbeitsbereich mit Webdateien.

  2. Nehmen Sie Änderungen an den jeweiligen Metadatendateien vor, und drücken Sie STRG+S, um die Änderungen zu speichern.

  3. Gehen Sie zum Designstudio und wählen Sie Sync, um alle Aktualisierungen in Ihrer aktuellen Design Studio-Sitzung abzurufen.

    Schnittstelle, die es dem Benutzer erlaubt, die Schaltfläche Sync zu wählen, um die in Visual Studio Code vorgenommenen Änderungen mit dem Design Studio zu synchronisieren.

  4. Wählen Sie Vorschau, um Änderungen an der Power Pages Website anzuzeigen.

Visual Studio Code für das Web oder Visual Studio Code Desktop verwenden

Benutzer können Änderungen an Seitenbearbeitungen mit Visual Studio Code für das Web bearbeiten, debuggen und in der Vorschau anzeigen, ohne externe Tools verwenden zu müssen. Visual Studio Code für Desktop bietet weitere erweiterte Funktionen zum Bearbeiten aller Website-Metadaten und zum Integrieren in GitHub, Frameworks und Prozesse für die kontinuierliche Integration (CI) und kontinuierliche Bereitstellung (CD).

Feature VS Code für das Web VS Code Desktop
Neue Metadatensätze für die Website-Konfiguration erstellen Nein Dies ist auf Webseiten, Seitenvorlagen, Webvorlagen, Inhaltsausschnitte und Webdateien beschränkt.
Direkte Seitenbearbeitung Ja Nein
Bearbeiten von Website-Metadaten Dies ist auf die Bearbeitung von Webseiten, Inhaltsausschnitten, Basisformularen, mehrstufigen Formularen, Listen und Webvorlagen beschränkt. Gesamte Power Pages-Metadatenkonfiguration
Website-Vorschau Geplant Geplant
Power Platform CLI Support Nein Ja
Erweiterter CPU- und speichergebundener Workflow – ReactJS oder andere Framework-Build-Tool-Unterstützung Nein Ja
GitHub-Integration mit Funktionen wie Code-Check-in, Check-out, Konfliktmanagement und Merge. Nein Ja

Bearbeiten von Code in der Portalverwaltungs-App

Anmerkung

  • Die Verwendung von Visual Studio Code für das Web zum Bearbeiten von Websites wird in Government Community Cloud (GCC), Government Community Cloud (GCC High) und Department of Defense (DoD) nicht unterstützt. Benutzer in diesen Regionen können die Portalverwaltungs-App verwenden, um ihre Änderungen vorzunehmen.

Wenn die Region den Visual Studio Code für das Web nicht unterstützt, wählen Sie im Befehl das Code-Editor-Symbol </> aus. Die Befehlsleiste öffnet die Portalverwaltungs-App.

Navigieren Sie zu den entsprechenden Webseiten, Basisformularen, Mehrschrittformularen, Listen oder Webvorlagen Datensätze zum Bearbeiten von Code.

Type Code-Standort
Webseite Websitedatensatz auswählen.
Wählen Sie im Abschnitt Lokalisierter Inhalt den Datensatz für den Webseiteninhalt aus.
Die Seitenkopie kann im Feld Kopie (HTML) auf der Registerkarte Allgemein bearbeitet werden.
Benutzerdefiniertes JavaScript und Benutzerdefinierter CSS Code können auf der Registerkarte Erweitert bearbeitet werden.
Basisformular Wählen Sie den Basisformulardatensatz aus.
Bearbeiten Sie Benutzerdefiniertes JavaScript auf der Registerkarte Zusätzliche Einstellungen.
Mehrstufiges Formular Wählen Sie den mehrstufigen Formulardatensatz aus.
Wählen Sie den mehrstufigen Formularschritt auf der Registerkarte Formularschritte aus.
Bearbeiten Benutzerdefiniertes JavaScript auf der Registerkarte Formularoptionen.
List Wählen Sie den Listendatensatz aus.
Bearbeiten Sie Benutzerdefiniertes JavaScript auf der Registerkarte Optionen.
Web-Vorlage Wählen Sie den Webvorlagendatensatz aus.
Bearbeiten Quelle auf der Registerkarte Allgemein.

Speichern Sie den Datensatz und zeigen Sie eine Vorschau Ihrer Website an, um Ihren Code zu testen.

Siehe auch