Freigeben über

Bearbeiten von Code mit Visual Studio Code für das Web (Vorschau)

[Dieses Thema ist eine Vorabdokumentation und kann geändert werden.]

Im Designstudio können Sie Websitecode mit Visual Studio Code für das Web bearbeiten. Mit diesem Feature können Sie statische Inhalte, HTML, CSS, Liquid und JavaScript für die folgenden Websitemetadaten bearbeiten:

Metadaten Content
Erweiterte Formulare (mehrstufige Formulare) JavaScript
Grundlegende Formulare JavaScript
Inhaltsausschnitte Alle unterstützten Inhaltsausschnittinhalte
Listen JavaScript
Webdateien Anzeigen und Herunterladen von Mediendateien. Bearbeiten von Textdateien (Code).
Webseiten Alle unterstützten Inhalte (pro Sprache), JavaScript und CSS
Webvorlagen Alle unterstützten Inhalte

Hinweis

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

Visual Studio Code für das Web bietet eine kostenlose, nullinstallationsfreie Microsoft Visual Studio Code-Oberfläche, die vollständig in Ihrem Browser ausgeführt wird, sodass Sie Websitecode durchsuchen und einfache Codeänderungen schnell und sicher vornehmen können. Weitere Informationen: Visual Studio Code für die Weboberfläche.

Von Bedeutung

  • Dies ist eine Vorschaufunktion.
  • Funktionen in der Vorschauversion sind nicht für den Produktionseinsatz gedacht und können eine eingeschränkte Funktionalität aufweisen. Diese Funktionen sind vor einer offiziellen Veröffentlichung verfügbar, damit Kunden frühzeitig zugreifen und Feedback geben können.

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

Hinweis

  • Beim ersten Laden von Visual Studio Code für das Web kann es einige Zeit dauern, da erforderliche Erweiterungen für dieses Feature installiert werden.
  • Dateierstellungs-, Lösch- und Umbenennungsvorgänge werden nicht unterstützt.
  • Dieses Feature verwendet die Weberweiterung Power Platform Tools . Weberweiterungen sind durch den Browser-Sandbox eingeschränkt und weisen daher Im Vergleich zu normalen Erweiterungen Einschränkungen auf.
    • Power Platform CLI wird nicht unterstützt.
    • Power Platform Tools-Weberweiterungsfeatures sind auf die Bearbeitung von Power Pages-Code beschränkt.
    • Dieses Feature 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 Portalverwaltungs-App zum Bearbeiten von Code. Weitere Informationen finden Sie im Abschnitt "Bearbeiten von Code in der Portalverwaltungs-App".

Code bearbeiten, der in Design Studio verfügbar ist

Sie können mit dem Bearbeiten des Websitecodes mit Visual Studio Code für das Web über die Startseite von Power Pages beginnen, indem Sie im Dropdownmenü "Bearbeiten" die Option "Websitecode bearbeiten" auswählen.

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

Sehen wir uns an, wie Code mithilfe dieser Bereiche bearbeitet wird.

Bearbeiten von Webseitencode aus dem Arbeitsbereich "Seiten"

Wenn Sie Power Pages-Designstudio öffnen, wird die Option "Code bearbeiten " im Menü"Seiten" 1 und in der oberen rechten Ecke des Bildschirms2 angezeigt.

Bearbeiten sie Code aus dem Arbeitsbereich

Headervorlagencode aus dem Arbeitsbereich "Seiten"

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

Code in der Seiten-Kopfzeile bearbeiten.

Bearbeiten von benutzerdefiniertem CSS-Code aus dem Styling-Arbeitsbereich

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

Bearbeiten Sie Code aus benutzerdefiniertem CSS.

Power Pages-Aktionsansicht

Mit der Power Pages-Aktionsansicht , auf die am unteren Rand des Datei-Explorers zugegriffen werden kann, können Sie Power Pages-Websites direkt im Editor verwalten. Dadurch wird die Notwendigkeit reduziert, zu Power Pages Studio zu wechseln, indem Entwickler häufige Aufgaben schnell innerhalb des Editors ausführen können.

Verfügbare Aktionen

  • Vorschau der Website
    Diese Aktion löscht den Konfigurationscache und öffnet die Website in VS Code. Es ermöglicht Entwicklern, Änderungen am Websitecode in der Vorschau anzuzeigen und zu testen, ohne den Kontext zu Power Pages Studio wechseln zu müssen.

  • In Power Pages Studio öffnen
    Nachdem Sie Codeänderungen vorgenommen haben, verwenden Sie diese Aktion, um zu Power Pages Studio zu wechseln. Dies ist hilfreich beim Konfigurieren von Authentifizierungsanbietern, Webrollen und anderen Websiteeinstellungen, die im Code-Editor nicht bearbeitet werden können.

  • In VS Code Desktop öffnen
    Wenn VS Code Desktop installiert ist, öffnet diese Aktion die Website in der Desktop-App. Außerdem wird ein Websitedownload ausgelöst, um sicherzustellen, dass der Code lokal verfügbar ist und zur Bearbeitung bereit ist.

Ansicht der Power Pages-Aktionen in VS Code.

Konfliktbenachrichtigung zusammenführen

Wenn Sie mit anderen Entwicklern zusammenarbeiten, gibt es möglicherweise Situationen, in denen Sie an demselben Quellcode arbeiten. Wenn Sie versuchen, Änderungen an einer veralteten Datei zu speichern, erhalten Sie eine Benachrichtigung zum Vergleichen oder Überschreiben von Änderungen.

Wenn Sie den Code vergleichen, wird der aktuelle Code zusammen mit Ihrem Code angezeigt, und Sie können auf die vorhandenen Änderungen zurücksetzen, jede Änderung einzeln akzeptieren oder Ihre Änderungen verwenden und die vorhandenen Inhalte überschreiben.

Konflikte im Code zusammenführen.

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

Lernprogramm: Bearbeiten von Websitecode mithilfe von Visual Studio Code für das Web

In diesem Lernprogramm werden Sie schrittweise durch die Bearbeitung des Websitecodes mithilfe von Visual Studio Code for Web geführt.

Schritt 1: Bearbeiten von Websitecode mithilfe von Visual Studio Code für das Web

  1. Öffnen Ihrer Website im Power Pages-Designstudio

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

    Öffnen in Visual Studio Code aus dem Designstudio.

  3. Wählen Sie im Bestätigungsdialogfeld "Visual Studio Code öffnen " aus.

  4. Melden Sie sich mit Ihren Anmeldeinformationen für Umgebungen bei Visual Studio Code an.

  5. Warten Sie darauf, dass die Power Platform Tools-Weberweiterung initialisiert und der Webseitencode im linken Bereich geladen wird.

Schritt 2: Aktualisieren von Inhalten und Code

  1. Der Explorer auf der linken Seite des Bildschirms lädt die entsprechenden Konfigurationsmetadaten der Website, 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 entsprechenden Metadatendateien vor, und drücken Sie STRG+S , um die Änderungen zu speichern.

  3. Wechseln Sie zu Design Studio, und wählen Sie "Synchronisieren" aus, um alle Updates in Ihrer aktuellen Designstudiositzung abzurufen.

    Über die Benutzeroberfläche können Benutzer die Schaltfläche

  4. Wählen Sie "Vorschau" aus, um Änderungen auf der Power Pages-Website anzuzeigen.

Verwenden von Visual Studio Code für das Web oder Visual Studio Code Desktop

Benutzer können Änderungen an Seitenbearbeitungen mithilfe von Visual Studio Code für das Web bearbeiten, debuggen und in der Vorschau anzeigen, ohne externe Tools verwenden zu müssen. Visual Studio Code Desktop bietet weitere erweiterte Features zum Bearbeiten aller Websitemetadaten und zur Integration in GitHub-, Framework- und fortlaufende Integration/kontinuierliche Entwicklungsprozesse (CI/CD).

Merkmal VS-Code für das Web VS Code Desktop
Erstellen neuer Metadateneinträge für die Websitekonfiguration Nein Beschränkt auf Webseiten, Seitenvorlagen, Webvorlagen, Inhaltsausschnitte und Webdateien.
Direkte Websitebearbeitung Yes Nein
Bearbeiten von Websitemetadaten Beschränkt auf das Bearbeiten von Webseiten, Inhaltsausschnitten, grundlegenden Formularen, mehrstufigen Formularen, Listen und Webvorlagen. Alle Metadatenkonfigurationen für Power Pages
Websitevorschau Geplant Geplant
Power Platform CLI-Unterstützung Nein Yes
Erweiterter CPU- und speicherlastiger Workflow – unterstützt durch ReactJS oder andere Framework-Build-Tools Nein Yes
GitHub-Integration mit Funktionen wie Code-Einchecken, Auschecken, Verwalten von Konflikten und Zusammenführen. Nein Yes

Bearbeiten von Code in der Portalverwaltungs-App

Hinweis

  • 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 der Bereich den Visual Studio Code für das Web nicht unterstützt, wird durch Auswählen des Code-Editor-Symbols </> in der Befehlsleiste die Portalverwaltungs-App geöffnet.

Navigieren Sie zu den entsprechenden Webseiten, Standardformularen, Mehrschrittformularen, Listen oder Webvorlagen-Datensätzen , um Code zu bearbeiten.

Typ Codespeicherort
Web page Websitedatensatz auswählen.
Wählen Sie den Inhaltsdatensatz für Webseiten aus dem Abschnitt " Lokalisierte Inhalte " aus.
Seitenkopie kann im Feld "Kopieren" (HTML) auf der Registerkarte " Allgemein " bearbeitet werden.
Benutzerdefinierter JavaScript - und benutzerdefinierter CSS-Code kann über die Registerkarte "Erweitert " bearbeitet werden.
Grundform Wählen Sie den grundlegenden Formulardatensatz aus. Benutzerdefiniertes JavaScript auf der Registerkarte "Zusätzliche Einstellungen" bearbeiten.
Mehrstufiges Formular Wählen Sie den Mehrschritt-Formulardatensatz aus.
Wählen Sie den mehrstufigen Formularschritt auf der Registerkarte " Formularschritte " aus. Benutzerdefiniertes JavaScript auf der Registerkarte ' Formularoptionen' bearbeiten.
List Wählen Sie den Listendatensatz aus. Benutzerdefiniertes JavaScript auf der Registerkarte "Optionen" bearbeiten.
Webvorlage Wählen Sie den Webvorlagendatensatz aus. Quelle auf der Registerkarte "Allgemein" bearbeiten.

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

Siehe auch

  • Last updated on