Brug udvidelsen Visual Studio Code

Visual Studio Code er en let, effektiv kildekodeeditor til Windows, macOS og Linux. Den understøtter JavaScript, TypeScript og Node.js og har et omfattende økosystem af udvidelser til andre sprog, f.eks. C++, C#, Java, Python, PHP og Go, og runtimes som .NET og Unity. Få mere at vide om Visual Studio Code i Hent i gang med VS Code.

Visual Studio Code giver dig mulighed for at udvide din funktionalitet via udvidelser. Visual Studio Code udvidelser kan føje flere funktioner til den overordnede oplevelse. Med udgivelsen af denne funktion kan du nu bruge udvidelsen Visual Studio Code til at arbejde med Power Pages.

Visual Studio Code udvidelse til Power Pages

Power Platform Tools tilføjer muligheden for at konfigurere websteder ved hjælp af Visual Studio Code og bruge det indbyggede flydende sprog IntelliSense aktivering af hjælp til fuldførelse af kode, hjælp og tip under tilpasning af grænsefladen på websteder ved hjælp af Visual Studio Code. Ved hjælp af udvidelsen Visual Studio Code kan du også konfigurere portaler via Microsoft Power Platform CLI.

Animation, der forklarer, hvordan du installerer og angiver Power Platform Tools.

Forudsætninger

Før du bruger udvidelsen Visual Studio Code til Power Pages, skal du:

• Download, installér og konfigurer Visual Studio Code. Flere oplysninger: Download Visual Studio Code

• Konfigurer dit miljø og system til understøttelse af Power Pages CI/CD ved hjælp af kommandolinjegrænsefladen. Flere oplysninger: Microsoft Power Platform CLI (prøveversion)

Installér Visual Studio Code udvidelse

Når du har installeret Visual Studio Code, skal du installere udvidelsen til plug-in'en Power Platform Tools til Visual Studio Code.

Sådan installerer du udvidelsen Visual Studio Code:

1. Åbn Visual Studio Code.

2. Vælg Udvidelser i venstre rude.

   

3. Vælg Indstillinger-ikon fra ruden øverst til højre med udvidelser.

4. Søg efter og vælg Power Platform Tools.

   Vælg Power Platform Tools.

5. Vælg Installer.

6. Kontrollér, at udvidelsen er installeret fra statusmeddelelserne.

Power Pages operationer

Power Pages Handlinger strømliner webstedsadministration og reducerer afhængigheden af Microsoft Power Platform CLI-kommandoer. Power Pages Handlinger er tilgængelige i ruden Power Pages Actions i Visual Studio Codes sidepanel.

I denne rude kategoriseres websteder på følgende måde:

• Aktive websteder: Websteder, der aktuelt er tilgængelige og aktive i det valgte miljø.
• Inaktive websteder: Websteder, der aktuelt vises i miljøet, men som ikke er aktive i øjeblikket.
• Andre websteder: Websteder, der er downloadet lokalt, men endnu ikke knyttet til det valgte miljø.

Ændring af miljøer

Skift miljøer:

1. Vælg knappen Change Environment i ruden Power Pages Handlinger.

   Ændre miljø for websteder

2. Vælg dit ønskede miljø på den viste liste.

Når du vælger et miljø, opdateres listen over websteder automatisk.

Handlinger for websteder

Forskellige typer websteder indeholder kontekstspecifikke handlinger, som du kan få adgang til ved at højreklikke.

Handlinger for aktive websteder

Højreklik på Aktive websteder for at få adgang til følgende handlinger:

• Forhåndsversion: Rydder cachen og åbner webstedet i VS Code til øjeblikkelig forhåndsversion.
• Upload: Overfører lokale ændringer tilbage til dit miljø.
• Download: Henter webstedsindholdet til en lokal mappe til offlineredigering.
• Webstedsdetaljer: Viser detaljerede oplysninger om webstedet.
• Vis i Stifinder: Navigerer til den lokale mappe, der indeholder webstedets kode.
• Åbning i Power Pages design studio: Åbner webstedet i Power Pages design studio.
• Kør CodeQL-screening: Udfør statisk kodeanalyse på HTML- og JavaScript-filer for at identificere sikkerhedsrisici i din kodebase ved hjælp af CodeQL. Denne indstilling er kun tilgængelig for websteder, der downloades lokalt, hvilket er angivet med mærket Aktuel på listen over aktive websteder.
• Sammenlign med lokal: Åbner en sammenligningsvisning for at identificere forskelle mellem dit lokale arbejdsområde og fjernmiljøet. Se flere oplysninger om funktionen til sammenligning af webstedskonfiguration.

Handlinger for inaktive websteder

Inaktive websteder leverer disse handlinger:

• Åbning af webstedsstyring: Åbner webstedet i Power Pages-administrationsprogrammet.
• Webstedsoplysninger: Indeholder detaljerede oplysninger om det valgte websted, f.eks. websteds-id, URL-adresse til websted, version af datamodel m.m.

Andre webstedshandlinger

Websteder, der er gemt lokalt, men endnu ikke i dit miljø, tilbyder følgende handlinger:

• Overfør websted: Overfører det lokale websted til dit tilknyttede miljø. Efter upload vises webstedet på listen Inaktive websteder, hvor du kan aktivere det fra Power Pages startside.
• Vis i Stifinder: Navigerer til den lokale mappe, der indeholder webstedets kode.

Filikoner

Udvidelsen Visual Studio Code for Power Pages identificerer og viser automatisk ikoner for filer og mapper i det downloadede webstedsindhold.

Liste over filer i en startskabelon med et webstedspecifikt filikon-tema.

Visual Studio Code bruger temaet med filikonet som ikke viser Power Pages specifikke ikoner. Hvis du vil have vist filikoner, der er specifikke for dine websteder, skal du opdatere Visual Studio Code-instansen til at bruge det specifikke Power Pages-filikon-tema.

Sådan aktiveres et portalspecifikt filikontema:

1. Åbn Visual Studio Code.

2. Gå til FilUdseende.

3. Vælg temaet for PowerApps-portalikoner.

   

Forhåndsversion af websted

Prøveversionshandlingen bruger udvidelsen Microsoft Edge DevTools til Visual Studio Code til at levere en prøveversion af webstedet i editoren. Denne funktion kører Microsoft Edge DevTools og en integreret Microsoft Edge browser med enhedsemulering direkte i VS Code, hvilket giver dig næsten alle de samme fejlfindings- og inspektionsfunktioner, der findes i hele Microsoft Edge DevTools.

Forhåndsvisningen viser altid de ændringer, du har uploadet til dit websted, så sørg for at skubbe eventuelle lokale ændringer, før du åbner den. Hver gang du starter forhåndsversionen, ryddes webstedscachen automatisk for at sikre, at du får vist de seneste opdateringer.

Hvis du vil åbne eksempelvisningen, skal du højreklikke på dit aktive websted under Power Pages Actions og vælge Preview. Denne handling åbner den integrerede Microsoft Edge browser, der peger på det valgte websted.

Forhåndsversionsruden åbnes i højre side.

Sammenlign webstedskonfiguration

Brug indstillingen Sammenlign med lokal til at identificere forskelle mellem dit lokale arbejdsområde og konfigurationen af livewebstedet i fjernmiljøet. Denne funktion hjælper dig med at registrere utilsigtede ændringer, foretage fejlfinding af miljøspecifikke problemer og bevare konsistensen, før du synkroniserer konfigurationen af webstedet.

Når du vælger denne handling, åbnes sektionen Webstedssammenligning under Værktøj i visningen Power Pages Handlinger. I dette afsnit vises alle filer i dit lokale arbejdsområde, der adskiller sig fra miljøet, med fremhævning:

• Tilføjet: Nye filer, der er oprettet i det lokale arbejdsområde, og som ikke findes i miljøet.
• Ændret: Filer, hvor koden eller metadataene varierer mellem de lokale versioner og miljøversionerne.
• Slettet: Filer, der er fjernet fra det lokale arbejdsområde, men stadig findes i miljøet.

Sådan sammenligner du en konfiguration af et dynamisk websted med det lokale arbejdsområde:

1. Udvid ruden Power Pages Actions i margenteksten i Stifinder.
2. Højreklik på det websted, du vil sammenligne, på listen Aktive/inaktive websteder .
3. Vælg Sammenlign med lokal.

Skærmbillede, der viser indstillingen Sammenlign med lokal på listen over websteder.

Sådan sammenligner du en bestemt mappe:

1. Vælg en mappe (f.eks. ) i dit lokale arbejdsområde i margenteksten i Stifinder.
2. Højreklik, og vælg Power Pages>Kompatibel med miljø.

Skærmbillede, der viser sammenligningsindstillingen i den lokale arbejdsområdemappe.

Administrer sammenligningsresultater

Når fanen Sammenligning af websted er aktiv med ændringer, kan du højreklikke på sammenligningslisten for at få adgang til yderligere handlinger:

• Åbn alle diff'er: Åbner Visual Studio Code diff-editor for hver fil på listen for at gennemse alle ændringer samtidigt.
• Opdateringssammenligning: Scanner det lokale arbejdsområde og fjernmiljøet igen for at opdatere listen med de seneste ændringer.
• Eksportér som HTML-rapport: Genererer et HTML-dokument, der kan deles, med oplysninger om alle registrerede forskelle.
• Eksportér som JSON: Eksporterer sammenligningsdataene i JSON-format til automatiserede arbejdsprocesser eller brugerdefineret rapportering. Du kan dele denne eksporterede fil med teammedlemmer, som kan importere den til deres egen visning ved at højreklikke på sektionen Sammenligning af websted og vælge indstillingen Importér sammenligning .
• Fjern alle lokale ændringer: Gendanner alle lokale ændringer, så de stemmer overens med den version, der aktuelt findes i fjernmiljøet.
• Fjern sammenligning: Lukker den aktuelle sammenligningssession og rydder fanen med resultater.

Skærmbillede, der viser indstillinger, der er tilgængelige under fanen sammenligning af websteder

Autofuldførelse

Autofuldførelsesfunktionen i udvidelsen Visual Studio Code viser den aktuelle kontekst, der redigeres, og de relevante autofuldførelseselementer via IntelliSense.

Skærmbillede med eksempel på autofuldførelse for sideskabelon-id.

Liquid-mærker

Når du tilpasser downloadet indhold ved hjælp af Visual Studio Code, kan du nu bruge IntelliSense til Power Pages Liquid-tags.

Begynd at skrive for at få vist en liste over Liquid-mærker. Vælg et mærke for at formatere det korrekt og fortsætte med dit input.

Skærmbillede af kodestykke med et eksempel på fuldførelse af Liquid-mærke.

Liquid-objekter

Du kan se fuldførelse af koden for Liquid-objektet ved at angive . Når markøren er placeret mellem klammeparenteserne, skal du vælge for at få vist en liste over Liquid-objekter, som du kan vælge. Hvis objektet har flere egenskaber, kan du angive et . og derefter vælge igen for at få vist bestemte egenskaber for Liquid-objektet.

Skærmbillede viser indtastning af et Liquid-objekt.

Skabelonmærker

Du kan se Power Pages forslag til webskabeloner ved at placere markøren i sætningen {include ' '} og vælge <CTRL> - space. Der vises en liste over eksisterende webskabeloner, som du kan vælge.

Skærmbillede af skabelon-koder.

Oprette, slette og omdøbe webstedsobjekter

Inde fra Visual Studio Code kan du oprette, slette og omdøbe følgende webstedskomponenter:

• Websider
• Sideskabeloner
• Webskabeloner
• Indholdskodestykker
• Nye aktiver (webfiler)

Opret handlinger

Du kan bruge kontekst-menuindstillinger til at oprette nye webstedskomponenter. Højreklik på et af de understøttede objekter, vælg Power Pages, og vælg den webstedsobjekttype, du vil oprette.

Du kan også bruge kommandopaletten Visual Studio Code ved at vælge Ctrl + Shift + P.

Opret et nyt objekt.

Du skal angive flere parametre for at oprette objektet.

Omdøb- og slettehandlinger

I filnavigationen kan du bruge genvejsmenuen til at omdøbe eller slette Power Pages komponenter.

Begrænsninger

Der gælder i øjeblikket følgende begrænsninger for Power Platform Tools til portaler:

• Autofuldførelses-funktioner understøttes kun med begrænset funktionalitet.

Relaterede oplysninger

Power Pages understøttelse af Microsoft Power Platform kommandolinjegrænseflade (prøveversion)