Bruk filtypen Visual Studio Code

Visual Studio Code er et lett, kraftig redigeringsprogram for kildekode for Windows, macOS og Linux. Den støtter JavaScript, TypeScript og Node.js og har et rikt økosystem av utvidelser for andre språk som C++, C#, Java, Python, PHP og Go, og kjøretider som .NET og Unity. Finn ut mer om Visual Studio Code i Kom i gang med VS Code.

Visual Studio Code lar deg utvide funksjonaliteten gjennom extensions. Visual Studio Code utvidelser kan legge til flere funksjoner i den generelle opplevelsen. Med utgivelsen av denne funksjonen kan du nå bruke Visual Studio Code-utvidelsen til å arbeide med Power Pages.

Visual Studio Code utvidelse for Power Pages

Power Platform Tools legger til muligheten til å konfigurere nettsteder ved hjelp av Visual Studio Code, og bruke det innebygde flytende språket IntelliSense som muliggjør hjelp med fullføring av kode, hjelp og tips mens du tilpasser nettstedsgrensesnittet ved hjelp av Visual Studio Code. Ved hjelp av Visual Studio Code-utvidelsen kan du også konfigurere portaler gjennom Microsoft Power Platform CLI.

Animasjon som forklarer hvordan du installerer og angir Power Platform Tools.

Forhåndskrav

Før du bruker Visual Studio Code-utvidelsen for Power Pages, må du:

• Last ned, installer og konfigurer Visual Studio Code. Mer informasjon: Last ned Visual Studio Code

• Konfigurer miljøet og systemet for Power Pages CI/CD-støtte ved hjelp av CLI. Mer informasjon: Microsoft Power Platform CLI (forhåndsversjon)

Installere Visual Studio Code-utvidelse

Når du har installert Visual Studio Code, må du installere utvidelsen for plugin-modulen for Power Platform-verktøy for Visual Studio Code.

For å installere Visual Studio Code-utvidelsen:

1. Åpne Visual Studio Code.

2. Velg Utvidelser fra den venstre ruten.

   

3. Velg Innstillinger-ikon øverst til høyre i utvidelsesruten.

4. Søk etter og velg Power Platform Tools.

   Velg Power Platform Tools.

5. Velg Installer.

6. Kontroller at utvidelsen er installert fra statusmeldingene.

Power Pages handlinger

Power Pages Handlinger effektiviserer områdeadministrasjon og reduserer avhengigheten av Microsoft Power Platform CLI-kommandoer. Power Pages Handlinger er tilgjengelig i ruten med tittelen Power Pages Handlinger i Explorer-sidepanelet i Visual Studio Code.

I denne ruten er nettsteder kategorisert som følger:

• Aktive nettsteder: Nettsteder som for øyeblikket er tilgjengelige og aktive i det valgte miljøet.
• Inaktive nettsteder: Nettsteder som finnes i miljøet, men ikke er aktive for øyeblikket.
• Andre nettsteder: Nettsteder som er lastet ned lokalt, men ennå ikke knyttet til det valgte miljøet.

Bytte miljøer

Slik bytter du miljøer:

1. Velg Endringsmiljø-knappen i handlingsruten Power Pages.

   Endre miljø for nettsteder

2. Velg ønsket miljø fra listen som vises.

Når du velger et miljø, oppdateres listen over nettsteder automatisk.

Handlinger for nettsteder

Ulike typer nettsteder tilbyr kontekstspesifikke handlinger du kan få tilgang til ved å høyreklikke.

Handlinger for aktive nettsteder

Høyreklikk på Aktive nettsteder for å få tilgang til følgende handlinger:

• Forhåndsvisning: Tømmer bufferen og åpner nettstedet i VS Code, slik at du kan forhåndsvise det umiddelbart.
• Last opp: Laster opp lokale endringer tilbake til miljøet ditt.
• Last ned: Laster ned nettstedsinnholdet til en lokal mappe for redigering i frakoblet modus.
• Nettstedsdetaljer: Viser detaljert informasjon om nettstedet.
• Vis i Utforsker: Navigerer til den lokale katalogen som inneholder koden for nettstedet.
• Åpne i Power Pages designstudio: Åpner nettstedet i Power Pages designstudio.
• Kjør CodeQL-screening: Utfør statisk kodeanalyse på HTML- og JavaScript-filer for å identifisere sårbarheter i kodebasen ved hjelp av CodeQL. Dette alternativet er bare tilgjengelig for områder som lastes ned lokalt, angitt av Gjeldende-koden i listen over aktive områder.
• Sammenlign med lokal: Åpner en sammenligningsvisning for å identifisere forskjeller mellom det lokale arbeidsområdet og det eksterne miljøet. Se flere detaljer om funksjonen for konfigurasjon av sammenligning av område.

Handlinger for inaktive nettsteder

Inaktive nettsteder tilbyr disse handlingene:

• Åpne områdebehandling: Åpner området i administrasjonsprogrammet for Power Pages.
• Områdedetaljer: Gir detaljert informasjon om det valgte nettstedet, for eksempel nettsteds-ID, nettadresse for nettsted, datamodellversjon med mer.

Andre nettstedshandlinger

Nettsteder som er lagret lokalt, men ennå ikke i miljøet, tilbyr følgende handlinger:

• Last opp nettsted: Laster opp det lokale nettstedet til det tilkoblede miljøet. Når du har lastet opp, vises nettstedet i listen over inaktive områder, der du kan aktivere det fra Power Pages hjem.
• Vis i Utforsker: Navigerer til den lokale katalogen som inneholder koden for nettstedet.

Filikoner

Utvidelsen Visual Studio Code for Power Pages identifiserer og viser automatisk ikoner for filer og mapper i det nedlastede nettstedsinnholdet.

Liste over filer i en startmalen med et nettstedsspesifikt filikontema.

Visual Studio Code bruker standard filikontema som ikke viser Power Pages bestemte ikoner. Hvis du vil vise filikoner som er spesifikke for nettstedene, må du oppdatere Visual Studio Code forekomst for å bruke det Power Pages bestemte filikontemaet.

Slik aktiverer du et portalspesifikt filikontema:

1. Åpne Visual Studio Code.

2. Gå til FilInnstillingerTemaFilikon-tema.

3. Velg temaet for PowerApps-portalikoner.

   

Forhåndsvis område

Forhåndsvisningshandlingen bruker utvidelsen Microsoft Edge DevTools for Visual Studio Code til å gi en forhåndsvisning av nettstedet i redigeringsprogrammet. Denne funksjonen kjører Microsoft Edge DevTools og en innebygd Microsoft Edge nettleser med enhetsemulering direkte i VS Code, noe som gir deg nesten alle de samme feilsøkings- og inspeksjonsfunksjonene som finnes i hele Microsoft Edge DevTools.

Forhåndsvisningen viser alltid endringene du lastet opp til nettstedet ditt, så sørg for at du gjør eventuelle lokale endringer før du åpner det. Hver gang du starter forhåndsvisningen, tømmes nettstedsbufferen automatisk for å sikre at du ser de nyeste oppdateringene.

Hvis du vil åpne forhåndsvisningen, høyreklikker du det aktive området under Power Pages Handlinger og velger Forhånd. Denne handlingen åpner den innebygde Microsoft Edge nettleser som peker til det valgte området.

Forhåndsvisningsruten åpnes på høyre side.

Sammenlign områdekonfigurasjon

Bruk alternativet Sammenlign med lokal til å identifisere forskjeller mellom det lokale arbeidsområdet og konfigurasjonen av det direktesendte området i det eksterne miljøet. Denne funksjonen hjelper deg med å oppdage utilsiktede endringer, feilsøke miljøspesifikke problemer og opprettholde konsekvens før du synkroniserer områdekonfigurasjonene.

Når du velger denne handlingen, åpnes en Site Comparison-inndeling under Tools i handlingsvisningen Power Pages. Denne delen viser alle filer i det lokale arbeidsområdet som skiller seg fra miljøet, og uthever:

• Lagt til: Nye filer opprettet i det lokale arbeidsområdet som ikke finnes i miljøet.
• Endret: Filer der koden eller metadataene er forskjellige mellom lokale versjoner og miljøversjoner.
• Slettet: Filer som er fjernet fra det lokale arbeidsområdet, men som fremdeles finnes i miljøet.

Slik sammenligner du en live områdekonfigurasjon med det lokale arbeidsområdet:

1. Utvid Power Pages Handlinger-ruten i Explorer-sidepanelet.
2. Høyreklikk området du vil sammenligne, i listen Aktive/inaktive områder .
3. Velg Sammenlign med lokal.

Skjermbilde som viser Sammenlign med lokalt alternativ i områdelisten.

Slik sammenligner du en bestemt mappe:

1. Velg en mappe (for eksempel ) fra det lokale arbeidsområdet i Explorer-sidepanelet.
2. Høyreklikk og velg Power Pages>Compare with Environment.

Skjermbilde som viser sammenligningsalternativet i den lokale arbeidsområdemappen.

Behandle sammenligningsresultater

Når fanen Områdesammenligning er aktiv med endringer, kan du høyreklikke sammenligningslisten for å få tilgang til flere handlinger:

• Åpne alle Diffs: Åpner Visual Studio Code diff-redigeringsprogrammet for hver fil i listen for å se gjennom alle endringer samtidig.
• Oppdateringssammenligning: Skanner det lokale arbeidsområdet og det eksterne miljøet på nytt for å oppdatere listen med de siste endringene.
• Eksporter som HTML-rapport: Genererer et delbart HTML-dokument som beskriver alle oppdagede forskjeller.
• Eksporter som JSON: Eksporterer sammenligningsdataene i JSON-format for automatiserte arbeidsflyter eller egendefinert rapportering. Du kan dele denne eksporterte filen med gruppemedlemmer, som kan importere den til sin egen visning ved å høyreklikke på delen Sammenligning av område og velge alternativet Importsammenligning .
• Forkast alle lokale endringer: Tilbakestiller alle lokale redigeringer for å samsvare med versjonen som for øyeblikket er i det eksterne miljøet.
• Fjern sammenligning: Lukker gjeldende sammenligningsøkt og fjerner resultatfanen.

Skjermbilde som viser alternativer som kan være tilgjengelige i fanen Sammenligning av nettsted

Autofullfør

Autofullfør-funksjonen i Visual Studio Code-utvidelsen viser gjeldende kontekst som redigeres, og de relevante autofullføringselementene gjennom IntelliSense.

Skjermbilde med et eksempel på autofullføring for sidemal-ID-en.

Liquid-koder

Når du tilpasser nedlastet innhold ved hjelp av Visual Studio Code, kan du nå bruke IntelliSense for Power Pages Liquid-koder.

Begynn å skrive for å se en liste over Liquid-koder. Velg en kode for å formatere den riktig, og fortsett med inndataene.

Skjermbilde av en snutt med et eksempel på fullføring av en Liquid-kode.

Liquid-objekter

Du kan se fullføringer av Liquid-objekt-kode ved å skrive inn . Når markøren er plassert mellom klammeparenteser, velger du for å vise en liste over Liquid-objekter du kan velge. Hvis objektet har flere egenskaper, kan du angi en . og deretter velge på nytt for å vise bestemte egenskaper for Liquid-objektet.

Skjermbilde som viser hvordan du skriver inn et Liquid-objekt.

Malmerker

Du kan se Power Pages nettmalforslag ved å plassere markøren i {include ' '}-setningen og velge <CTRL> - space. Det vises en liste over eksisterende nettmaler som du kan velge.

Skjermbilde av maltagger.

Opprett, slett og gi nytt navn til nettstedsobjekter

Fra Visual Studio Code kan du opprette, slette og gi nytt navn til følgende nettstedskomponenter:

• Nettsider
• Sidemaler
• Nettmaler
• Innholdssnutter
• Nye aktiva (nettfiler)

Opprett operasjoner

Du kan bruke hurtigmenyalternativene til å opprette nye nettstedskomponenter. Høyreklikk et av de støttede objektene, velg Power Pages, og velg objekttypen for nettstedet du vil opprette.

Du kan også bruke kommandopaletten Visual Studio Code ved å velge Ctrl + Shift + P.

Opprett et nytt objekt.

Du må angi flere parametere for å opprette objektet.

Endre navn på og slette operasjoner

Fra filnavigasjonen kan du bruke hurtigmenyen til å gi nytt navn til eller slette Power Pages komponenter.

Begrensninger

Følgende begrensninger gjelder for Power Platform Tools for portaler:

• Autofullføring støtter bare begrenset funksjonalitet.

Relatert informasjon

Power Pages støtte for Microsoft Power Platform CLI (forhåndsversjon)