Kasuta Visual Studio Code laiendust

Visual Studio Code on kerge ja võimas lähtekoodiredaktor Windows'i, macOS-i ja Linuxi jaoks. See toetab JavaScripti, TypeScripti ja Node.js ning pakub rikkalikku laienduste ökosüsteemi teistele keeltele nagu C++, C#, Java, Python, PHP ja Go, ning käitusajad nagu .NET ja Unity. Loe rohkem Visual Studio Code kohta Alusta VS Code kasutamisega.

Visual Studio Code võimaldab laiendada oma võimekust extensions kaudu. Visual Studio Code laiendused võivad lisada kogemusele rohkem funktsioone. Selle funktsiooni ilmumisega saad nüüd kasutada Visual Studio Code laiendust, et töötada Power Pages'iga.

Visual Studio Code laiendus Power Pages jaoks

Power Platform Tools lisab võimaluse konfigureerida veebilehti Visual Studio Code abil ning kasutada sisseehitatud Liquid keelt IntelliSense mis võimaldab abi koodi täitmisel, abistamisel ja vihjete andmisel, samal ajal veebilehe liidest kohandades Visual Studio Code abil. Visual Studio Code laienduse abil saad portaale konfigureerida ka Microsoft Power Platform CLI kaudu.

Märkus.

  • Pead veenduma, et node.js on alla laaditud ja paigaldatud samale tööjaamale nagu Visual Studio Code, et Power Pages funktsioonid töötaksid.
  • Veenduge, et ainult teenuse Power Platform Tools oleksid endiselt installitud, mitte mõlemad nii teenuse Power Platform Tools kui ka rakendus Power Platform Tools [EELVERSIOON]. Vt üksikasjade saamiseks teadaolevaid probleeme.

Animatsioon, mis selgitab, kuidas teenust Power Platform Tools installida ja seadistada.

Eeltingimused

Enne Visual Studio Code laienduse kasutamist Power Pages'i jaoks pead tegema:

Paigalda Visual Studio Code laiendus

Pärast Visual Studio Code'i paigaldamist tuleb paigaldada Visual Studio Code'i Power Platform Tools plugina laienduse.

Visual Studio Code laienduse paigaldamiseks:

  1. Ava Visual Studio Code.

  2. Valige vasakpoolselt paanilt Laiendid.

    Visual Studio Code extension.

  3. Valige laienduste paani parempoolses ülanurgas ikoon Sätted.

  4. Otsige ja valige Power Platform Tools.

    Valige teenus Power Platform Tools.

  5. Valige Installi.

  6. Kontrollige olekuteadetest, et laiend oleks edukalt installitud.

Näpunäide

Power Platform Tools Extension võimaldab automaatselt kasutada Microsoft Power Platform CLI käske Visual Studio Code seest kuni Visual Studio integreeritud terminal.

Power Pages tegevused

Power Pages Tegevused lihtsustavad saidi haldust ja vähendavad sõltuvust Microsoft Power Platform CLI käskudest. Power Pages Tegevused on saadaval Visual Studio Code. aasta Explorer'i külgribal Power Pages Actions paneelil.

Sellel paanil liigitatakse saidid järgmiselt.

  • Aktiivsed saidid: saidid, mis on valitud keskkonnas praegu saadaval ja aktiivsed.
  • Passiivsed saidid: saidid, mis on keskkonnas olemas, kuid pole praegu aktiivsed.
  • Muud saidid: kohapeal alla laaditud saidid, mis pole veel valitud keskkonnaga seotud.

Muutuv keskkond

Keskkonna vahetamiseks tehke järgmist.

  1. Valige Power Pages Tegevuste paneelil nupp Change Environment.

    Saidi keskkonna muutmine

  2. Valige kuvatavast loendist soovitud keskkond.

Keskkonna valimisel värskendatakse saitide loendit automaatselt.

Tegevused saitide jaoks

Erinevat tüüpi saidid pakuvad kontekstipõhiseid toiminguid, millele pääsete juurde paremklõpsates.

Aktiivsete saitide toimingud

Paremklõpsake valikul Aktiivsed saidid, et pääseda juurde järgmistele toimingutele.

  • Eelvaade: tühjendab vahemälu ja avab saidi VS Code’is koheseks eelvaateks.
  • Üleslaadimine: laadib kohalikud muudatused teie keskkonda tagasi.
  • Laadi alla: laadib saidi sisu võrguühenduseta redigeerimiseks alla kohalikku kausta.
  • Saidi üksikasjad: kuvab saidi kohta üksikasjaliku teabe.
  • Reveal in Explorer: navigeerib kohalikku kataloogi, mis sisaldab saidi koodi.
  • Avatud Power Pages disainistuudios: Avab saidi Power Pages disainistuudios.
  • Käivitage CodeQL-i sõeluuring: tehke HTML- ja JavaScript-failide staatiline koodianalüüs, et tuvastada koodibaasi haavatavused CodeQL-i abil. See suvand on saadaval ainult kohapeal alla laaditud saitide puhul, mida tähistab aktiivsete saitide loendis märgend Praegune sildiga.
  • Võrdle kohalikuga: Avab võrdlusvaate, et tuvastada erinevused sinu kohaliku töökeskkonna ja kaugkeskkonna vahel. Vaata rohkem teavet saidi konfiguratsiooni võrdlemise funktsiooni kohta.

Passiivsete saitide toimingud

Passiivsed saidid pakuvad järgmisi toiminguid.

  • Open Site Management: Avab saidi Power Pages haldusrakenduses.
  • Saidi detailid: Annab üksikasjalikku teavet valitud saidi kohta, nagu veebisaidi ID, veebisaidi URL, andmemudeli versioon ja palju muud.

Muude saitide toimingud

Kohapeal, kuid veel teie keskkonnas talletatud saidid pakuvad järgmisi toiminguid.

  • Laadi sait üles: laadib kohaliku saidi üles teie ühendatud keskkonda. Pärast üleslaadimist ilmub sait Inaktiivsete saitide nimekirja, kus saate selle aktiveerida Power Pages'i avalehelt.
  • Reveal in Explorer: navigeerib kohalikku kataloogi, mis sisaldab saidi koodi.

Faili ikoonid

Visual Studio Code laiendus Power Pages'ile tuvastab ja kuvab automaatselt ikoonid failide ja kaustade jaoks allalaaditud veebisaidi sisu sees.

Failide loend algusmallis veebisaidile omase faili ikooniteemaga.

Visual Studio Code kasutab vaikimisi faili ikooniteemat mis ei näita Power Pages konkreetseid ikoone. Veebilehtedele spetsiifiliste failiikoonide vaatamiseks tuleb uuendada Visual Studio Code instantsi kasutama Power Pages'i failiikooni teemat.

Portaalidele omase failiikooniga kujunduse lubamiseks:

  1. Ava Visual Studio Code.

  2. Mine faili>eelistuste>teema> ikooniteema juurde.

  3. Valige teenuse PowerApps portaalide ikoonide teema.

    ekraanipilt näitab Power Apps portaalide ikoonide teema valimist.

Saidi eelversioon

Eelvaate tegevus kasutab Microsoft Edge DevTools laiendust Visual Studio Code jaoks, et pakkuda toimetajasisene saidi eelvaadet. See funktsioon käivitab Microsoft Edge DevToolsi ja sisseehitatud Microsoft Edge brauseri koos seadme emulatsiooniga otse VS Code'is, pakkudes peaaegu kõiki samu silumis- ja kontrollivõimalusi, mis on olemas täisversioonis Microsoft Edge DevToolsis.

Eelvaade näitab alati saidile üles laaditud muudatusi, seega veenduge, et lükkaksite enne selle avamist kõik kohalikud muudatused. Iga kord, kui eelvaate käivitate, tühjendatakse saidi vahemälu automaatselt, et tagada uusimate värskenduste kuvamine.

Eelvaate avamiseks klõpsa paremklõpsuga oma aktiivsel saidil Power Pages Actions all ja vali Preview. See tegevus avab sisseehitatud Microsoft Edge brauseri, mis osutab valitud saidile.

Ekraanipilt Power Pages saidi eelvaate toimingust.

Eelvaatepaan avaneb paremal küljel.

Ekraanipilt, mis näitab failide nimekirja, avatud faili Visual Studio Code redaktoris ja eelvaade paremal küljel.

Võrdle saidi konfiguratsiooni

Kasuta valikut Võrdle kohalikuga , et tuvastada erinevusi oma kohaliku töökeskkonna ja reaalajas asukoha konfiguratsiooni vahel kaugkeskkonnas. See funktsioon aitab tuvastada soovimatuid muudatusi, lahendada keskkonnaspetsiifilisi probleeme ning säilitada järjepidevus enne saidi konfiguratsioonide sünkroniseerimist.

Kui valid selle tegevuse, avaneb Site võrdlus sektsioon Tools all Power Pages Tegevuste vaates. See sektsioon kuvab kõik failid sinu kohalikus töökeskkonnas, mis erinevad keskkonnast, tuues esile:

  • Lisatud: Uued failid, mis on loodud kohalikus tööruumis, kuid keskkonnas ei eksisteeri.
  • Muudetud: failid, mille kood või metaandmed erinevad kohaliku ja keskkonna versioonide vahel.
  • Kustutatud: Failid, mis on eemaldatud kohalikust tööruumist, kuid eksisteerivad endiselt keskkonnas.

Et võrrelda reaalajas saidi konfiguratsiooni kohaliku töökeskkonnaga:

  1. Explorer külgribal laienda Power Pages Actions paneeli.
  2. Aktiivsete/mitteaktiivsete saitide nimekirjas tee paremklõps saidil, mida soovid võrrelda.
  3. Vali Võrdle kohalikuga.

Ekraanipilt, mis näitab saidi nimekirjas valikut

Konkreetse kausta võrdlemiseks:

  1. Exploreri külgribal vali kaust (näiteks web-pages) oma kohalikust tööruumist.
  2. Tee paremklõps ja vali Power Pages>Võrdle Keskkonnaga.

Ekraanipilt, mis näitab võrdlemisvõimalust kohalikus töökeskkonna kaustas.

Halda võrdlustulemusi

Kui saidi võrdluse vahekaart on muudatustega aktiivne, saad paremklõpsata võrdlusnimekirja, et pääseda ligi täiendavatele tegevustele:

  • Open All Diffs: Avab Visual Studio Code diff redaktori iga faili jaoks nimekirjas, et kõik muudatused korraga üle vaadata.
  • Värskenduse võrdlus: Skaneerib uuesti kohalikku tööruumi ja kaugkeskkonda, et uuendada nimekirja viimaste muudatustega.
  • Ekspordi HTML-aruandena: Genereerib jagatava HTML-dokumendi, mis kirjeldab kõiki tuvastatud erinevusi.
  • Eksport JSON-ina: ekspordib võrdlusandmed JSON-formaadis automatiseeritud töövoogude või kohandatud aruandluse jaoks. Seda eksporditud faili saad jagada meeskonnaliikmetega, kes saavad selle oma vaatesse importida, paremklõpsuga saidi võrdluse sektsioonil ja valides Impordi võrdluse valiku.
  • Eemalda kõik kohalikud muudatused: Tühistab kõik kohalikud muudatused, et vastata praegusele kaugkeskkonnas olevale versioonile.
  • Eemalda võrdlus: Sulgeb praeguse võrdlussessiooni ja tühjendab tulemuste vahekaardi.

Näpunäide

Võrdlusandmete eksportimine ja jagamine JSON-ina võimaldab teie meeskonnal koostööd teha konfiguratsioonierinevuste lahendamisel, ilma et kõik peaksid olema ühendatud samasse keskkonda.

Ekraanipilt, mis näitab võimalusi, mis on saadaval saidi võrdlusvahekaardil

Automaattekst

Visual Studio Code laienduse automaattäitmise võimalus näitab redigeeritavat praegust konteksti ja asjakohaseid automaatse täienduse elemente IntelliSense'i kaudu.

Kuvatõmmis lehemalli ID automaatteksti näitega.

Liquid-sildid

Allalaaditud sisu kohandamisel Visual Studio Code abil saab nüüd kasutada IntelliSense'i Power Pages Liquid siltide jaoks.

Liquid-siltide loendi kuvamiseks alustage tippimist. Valige silt, et see õigesti vormindada, ja jätkake sisendiga.

Kuvatõmmis katkendist koos Liquidi märgendi lõpuleviimise näitega.

Liquid-objektid

Saate näha Liquid-objekti koodi lõpetamist, kui sisestate {{ }}. Kui kursor on paigutatud sulgude vahele, valige <CTRL + space>, et kuvada loend Liquid-objektidest, mida saate valida. Kui objektil on rohkem atribuute, saate sisestada . ja seejärel valige <CTRL + space> uuesti, et näha Liquid-objekti kindlaid atribuute.

Kuvatõmmis näitab Liquidi objekti sisestamist.

Mallisildid

Power Pages veebimalli soovitusi näed, kui asetad kursori {include ' '} lausesse ja valid <CTRL> - space. Kuvatakse olemasolevate veebimallide loend, mille saate valida.

Mallisiltide kuvatõmmis.

Veebisaidi objektide loomine, kustutamine ja ümbernimetamine

Visual Studio Code'is saad luua, kustutada ja ümber nimetada järgmisi veebisaidi komponente:

  • Veebilehed
  • Lehemallid
  • Veebimallid
  • Sisulõigud
  • Uued varad (veebifailid)

Toimingute loomine

Kontekstimenüü valikute abil saate luua uusi veebisaidi komponente. Paremklõpsa ühel toetatud objektil, vali Power Pages ja vali soovitud veebilehe objektitüüp.

Alternatiivina võid kasutada Visual Studio Code käsupaletti, valides Ctrl + Shift + P.

Looge uus objekt.

Objekti loomiseks peate määrama rohkem parameetreid.

Objekt Parameetrid
Veebilehed Nimi, lehemall, emaleht
Lehemallid Nimi, veebimall
Veebimallid Nimi
Sisulõigud Nimi ja kas koodilõik saab olema HTML või tekst.
Uued varad (veebifailid) Nimi, emaleht ja valige üleslaadimiseks fail.

Toimingute ümbernimetamine ja kustutamine

Failide navigeerimisest saad kontekstimenüüd kasutada Power Pages'i komponentide ümbernimetamiseks või kustutamiseks.

Märkus.

Kustutatud objekte saab töölaua prügikastist taastada.

Kitsendused

Portaalide Power Platform Tools tööriistade jaoks kehtivad praegu järgmised piirangud.

Power Pages tugi Microsoft Power Platform CLI-le (eelvaade)