De Visual Studio Code-extensie gebruiken

Visual Studio Code is een lichtgewicht, krachtige broncode-editor voor Windows, macOS en Linux. Het biedt ondersteuning voor JavaScript, TypeScript en Node.js en heeft een uitgebreid ecosysteem van extensies voor andere talen, zoals C++, C#, Java, Python, PHP en Go, en runtimes zoals .NET en Unity. Meer informatie over Visual Studio Code in Get gestart met VS Code.

Met Visual Studio Code kunt u uw mogelijkheden uitbreiden via extensies. Visual Studio Code extensies kunnen meer functies toevoegen aan de algehele ervaring. Met de release van deze functie kunt u nu de Visual Studio Code-extensie gebruiken om met Power Pages te werken.

Visual Studio Code-extensie voor Power Pages

De Power Platform Tools voegen de mogelijkheid toe om websites te configureren met Visual Studio Code, en maken gebruik van de ingebouwde Liquid-taal IntelliSense, waardoor hulp bij codevoltooiing, assistentie en hints beschikbaar zijn tijdens het aanpassen van de websiteinterface met behulp van Visual Studio Code. Met behulp van de Visual Studio Code-extensie kunt u portals ook configureren via de Microsoft Power Platform CLI.

Opmerking

U moet ervoor zorgen dat node.js op hetzelfde werkstation wordt gedownload en geïnstalleerd als Visual Studio Code om de Power Pages functies te laten werken.
Zorg ervoor dat alleen Power Platform Tools zijn geïnstalleerd en niet zowel Power Platform Tools als Power PlatformTools [PREVIEW]. Zie bekende problemen voor meer informatie.

Animatie waarin wordt uitgelegd hoe u Power Platform Tools installeert en instelt.

Vereisten

Voordat u de Visual Studio Code-extensie voor Power Pages gebruikt, moet u het volgende doen:

Download, installeer en configureer Visual Studio Code. Meer informatie: Download Visual Studio Code
Configureer uw omgeving en systeem voor Power Pages CI/CD-ondersteuning met behulp van CLI. Meer informatie: Microsoft Power Platform CLI (preview)

Visual Studio Code-extensie installeren

Nadat u Visual Studio Code hebt geïnstalleerd, moet u de extensie voor de invoegtoepassing Power Platform-hulpprogramma's voor Visual Studio Code installeren.

De Visual Studio Code-extensie installeren:

Open Visual Studio Code.
Selecteer Extensies in het linkerdeelvenster.
Selecteer het pictogram Instellingen in de rechterbovenhoek van het deelvenster met extensies.
Zoek en selecteer Power Platform Tools.

Selecteer Power Platform Tools.
Selecteer Installeren.
Controleer aan de hand van de statusberichten of de extensie met succes is geïnstalleerd.

Tip

Met de Power Platform Tools Extension kunt u automatisch CLI-opdrachten van Microsoft Power Platform gebruiken vanuit Visual Studio Code via de Visual Studio Geïntegreerde Terminal.

Power Pages acties

Power Pages Acties stroomlijnen sitebeheer en verminderen de afhankelijkheid van Microsoft Power Platform CLI-opdrachten. Power Pages Acties is beschikbaar in het deelvenster met de titel Power Pages Actions in de zijbalk van de Verkenner van Visual Studio Code.

Binnen dit deelvenster worden sites als volgt gecategoriseerd:

Actieve sites: sites die momenteel beschikbaar en actief zijn in de geselecteerde omgeving.
Inactieve sites: sites die aanwezig zijn in de omgeving maar momenteel niet actief zijn.
Andere sites: sites die lokaal zijn gedownload, maar nog niet aan de geselecteerde omgeving zijn gekoppeld.

Omgevingen wijzigen

Omschakelen tussen omgevingen:

Selecteer de knop Omgeving wijzigen in het deelvenster Power Pages Acties.

Omgeving voor sites wijzigen
Selecteer de omgeving van uw keuze in de weergegeven lijst.

Wanneer u een omgeving selecteert, wordt de lijst met sites automatisch bijgewerkt.

Acties voor sites

Verschillende typen sites bieden contextspecifieke acties die u kunt uitvoeren door met de rechtermuisknop te klikken.

Acties van actieve sites

Klik met de rechtermuisknop op Actieve sites om de volgende acties te openen:

Preview: wist de cache en opent de site in VS Code voor onmiddellijk voorbeeld.
Uploaden: upload lokale wijzigingen terug naar uw omgeving.
Downloaden: downloadt de site-inhoud naar een lokale map voor offline bewerking.
Sitedetails: geeft gedetailleerde informatie over de site weer.
Weergeven in Verkenner: navigeert naar de lokale map met de code van de site.
Open in Power Pages design studio: Hiermee opent u de site in Power Pages ontwerpstudio.
CodeQL-screening uitvoeren: voer statische codeanalyse uit op HTML- en JavaScript-bestanden om beveiligingsproblemen in uw codebase te identificeren met behulp van CodeQL. Deze optie is alleen beschikbaar voor sites die lokaal worden gedownload, aangegeven door de huidige tag in de lijst met actieve sites.
Vergelijken met Lokaal: Hiermee opent u een vergelijkingsweergave om verschillen tussen uw lokale werkruimte en de externe omgeving te identificeren. Zie meer informatie over de functie voor het vergelijken van de siteconfiguratie.

Acties van inactieve sites

Inactieve sites bieden de volgende acties:

Open Sitebeheer: Hiermee opent u de site in de Power Pages beheertoepassing.
Sitedetails: biedt gedetailleerde informatie over de geselecteerde site, zoals website-id, website-URL, gegevensmodelversie en meer.

Acties van andere sites

Sites die lokaal zijn opgeslagen maar nog niet in uw omgeving, bieden de volgende acties:

Site uploaden: uploadt de lokale site naar uw verbonden omgeving. Na het uploaden wordt de site weergegeven in de lijst inactieve sites, waar u deze kunt activeren vanaf Power Pages startpagina.
Weergeven in Verkenner: navigeert naar de lokale map met de code van de site.

Bestandspictogrammen

De Visual Studio Code-extensie voor Power Pages identificeert en toont automatisch pictogrammen voor bestanden en mappen in de gedownloade website-inhoud.

Lijst met bestanden in een startsjabloon met een websitespecifiek bestandspictogramthema.

Visual Studio Code gebruikt het standaardthema voor het bestandspictogram waarop geen specifieke pictogrammen Power Pages worden weergegeven. Als u bestandspictogrammen wilt weergeven die specifiek zijn voor uw websites, moet u het Visual Studio Code exemplaar bijwerken om het thema van het Power Pages specifieke bestandspictogram te gebruiken.

Ga als volgt te werk om een portalspecifiek bestandspictogramthema in te schakelen:

Open Visual Studio Code.
Ga naar BestandVoorkeurenThemaBestandspictogramthema.
Selecteer het thema voor PowerApps-portals-pictogrammen.

Voorbeeld van site

De preview-actie maakt gebruik van de extensie Microsoft Edge DevTools voor Visual Studio Code om een in-editor-sitevoorbeeld te bieden. Deze functie maakt gebruik van Microsoft Edge DevTools en een ingebouwde Microsoft Edge-browser met apparaatemulatie direct in VS Code, waardoor u bijna dezelfde foutopsporings- en inspectiemogelijkheden hebt als beschikbaar in de volledige Microsoft Edge DevTools.

In het voorbeeld worden altijd de wijzigingen weergegeven die u naar uw site hebt geüpload. Zorg er dus voor dat u eventuele lokale bewerkingen doorvoert voordat u de voorbeeldweergave opent. Elke keer dat u de voorvertoning start, wordt de cache van de site automatisch gewist, zodat u altijd de meest recente updates ziet.

Als u het voorbeeld wilt openen, klikt u met de rechtermuisknop op uw actieve site onder Power Pages Actions en selecteert u Preview. Met deze actie wordt de ingesloten Microsoft Edge browser geopend die verwijst naar de door u gekozen site.

Schermopname van de voorbeeldactie van de Power Pages-site.

Het voorvertoningsvenster wordt aan de rechterkant geopend.

Schermafbeelding met de lijst met bestanden, open het bestand in Visual Studio Code editor en een voorbeeld aan de rechterkant.

Siteconfiguratie vergelijken

Gebruik de optie Vergelijken met Lokaal om verschillen te identificeren tussen uw lokale werkruimte en de configuratie van de livesite in de externe omgeving. Met deze functie kunt u onbedoelde wijzigingen detecteren, omgevingsspecifieke problemen oplossen en consistentie behouden voordat u uw siteconfiguraties synchroniseert.

Wanneer u deze actie selecteert, wordt een sectie Sitevergelijking geopend onder de Tools in de weergave Power Pages Acties. In deze sectie worden alle bestanden in uw lokale werkruimte weergegeven die verschillen van de omgeving, met de markering:

Toegevoegd: Nieuwe bestanden die zijn gemaakt in de lokale werkruimte die niet in de omgeving bestaan.
Gewijzigd: Bestanden waarin de code of metagegevens verschillen tussen de lokale en omgevingsversies.
Verwijderd: Bestanden die zijn verwijderd uit de lokale werkruimte, maar die nog steeds aanwezig zijn in de omgeving.

Een live-siteconfiguratie vergelijken met de lokale werkruimte:

Vouw in de zijbalk van Explorer het deelvenster Power Pages Actions uit.
Klik in de lijst Actieve/inactieve sites met de rechtermuisknop op de site die u wilt vergelijken.
Selecteer Vergelijken met Lokaal.

Schermopname van vergelijken met de lokale optie in de sitelijst.

Een specifieke map vergelijken:

Selecteer in de zijbalk van Explorer een map (zoals ) in uw lokale werkruimte.
Klik met de rechtermuisknop en selecteer Power Pages>Vergelijken met omgeving.

Schermopname van de optie Vergelijken in de lokale werkruimtemap.

Vergelijkingsresultaten beheren

Zodra het tabblad Sitevergelijking actief is met wijzigingen, kunt u met de rechtermuisknop op de vergelijkingslijst klikken om toegang te krijgen tot aanvullende acties:

Alle diffs openen: hiermee opent u de Visual Studio Code diff-editor voor elk bestand in de lijst om alle wijzigingen tegelijk te controleren.
Vergelijking vernieuwen: scant de lokale werkruimte en de externe omgeving opnieuw om de lijst bij te werken met de meest recente wijzigingen.
Exporteren als HTML-rapport: genereert een deelbaar HTML-document met alle gedetecteerde verschillen.
Exporteren als JSON: exporteert de vergelijkingsgegevens in JSON-indeling voor geautomatiseerde werkstromen of aangepaste rapportage. U kunt dit geëxporteerde bestand delen met teamleden, die het in hun eigen weergave kunnen importeren door met de rechtermuisknop op de sectie Sitevergelijking te klikken en de optie Importvergelijking te selecteren.
Alle lokale wijzigingen negeren: hiermee worden alle lokale bewerkingen teruggezet zodat deze overeenkomen met de versie die zich momenteel in de externe omgeving bevindt.
Vergelijking verwijderen: hiermee sluit u de huidige vergelijkingssessie en wordt het resultaat-tabblad gewist.

Tip

Wanneer u vergelijkingsgegevens exporteert en deelt als JSON, kan uw team samenwerken aan het oplossen van configuratieverschillen zonder dat iedereen met dezelfde omgeving hoeft te worden verbonden.

Schermopname van opties die beschikbaar zijn op het tabblad Sitevergelijking

Automatisch aanvullen

De functie voor automatisch aanvullen in de Visual Studio Code-extensie toont de huidige context die wordt bewerkt en de relevante elementen voor automatisch aanvullen via IntelliSense.

Schermopname met een voorbeeld van automatisch aanvullen voor de paginasjabloon-id.

Liquid-codes

Bij het aanpassen van gedownloade inhoud met behulp van Visual Studio Code kunt u nu IntelliSense gebruiken voor Power Pages Liquid-tags.

Begin met typen om een lijst met Liquid-tags te zien. Selecteer een tag om deze correct op te maken en ga verder met uw invoer.

Schermopname van een fragment met een voorbeeld van het voltooien van Liquid-code.

Liquid-objecten

U kunt zien hoe codes van Liquid-objecten worden ingevuld door in te voeren. Plaats de cursor tussen de haakjes en selecteer om een lijst met Liquid-objecten weer te geven die u kunt selecteren. Als het object meer eigenschappen heeft, kunt u een . invoeren en vervolgens opnieuw selecteren om specifieke eigenschappen van het Liquid-object te bekijken.

Schermopname toont het invoeren van een Liquid-object.

Sjabloontags

U kunt Power Pages suggesties voor websjablonen zien door de cursor in de instructie {include ' '} te plaatsen en <CTRL> - space te selecteren. Er verschijnt een lijst met bestaande websjablonen waaruit u een keuze kunt maken.

Schermopname van sjablooncodes.

Website-objecten maken, verwijderen en hernoemen

Vanuit Visual Studio Code kunt u de volgende websiteonderdelen maken, verwijderen en de naam ervan wijzigen:

Webpagina's
Paginasjablonen
Websjablonen
Inhoudsfragmenten
Nieuwe assets (webbestanden)

Maakbewerkingen

U kunt de opties in het contextmenu gebruiken om nieuwe websitecomponenten te maken. Klik met de rechtermuisknop op een van de ondersteunde objecten, kies Power Pages en selecteer het type websiteobject dat u wilt maken.

U kunt ook het Visual Studio Code opdrachtpalet gebruiken door Ctrl + Shift + P te selecteren.

Maak een nieuw object.

U moet meer parameters opgeven om het object te maken.

Object	Parameters
Webpagina's	Naam, paginasjabloon, bovenliggende pagina
Paginasjablonen	Naam, websjabloon
Websjablonen	Naam
Inhoudsfragmenten	Naam en of het fragment HTML of tekst is.
Nieuwe assets (webbestanden)	Naam, bovenliggende pagina en selecteer bestand om te uploaden.

Hernoem- en verwijderbewerkingen

In de bestandsnavigatie kunt u het contextmenu gebruiken om de naam van Power Pages onderdelen te wijzigen of te verwijderen.