Zdieľať cez


Použitie rozšírenia Visual Studio Code

Visual Studio Code je ľahký, ale výkonný editor zdrojového kódu, ktorý je spustený na pracovnej ploche a je k dispozícii pre systémy Windows, macOS a Linux. Dodáva sa so zabudovanou podporou pre JavaScript, TypeScript a Node.js a má bohatý ekosystém rozšírení pre ďalšie jazyky (napríklad C++, C#, Java, Python, PHP a Go) a modulov runtime (napríklad .NET a Unity). Ďalšie informácie nájdete v téme Začíname s VS Code.

Visual Studio Code vám umožňuje rozšíriť vaše schopnosti prostredníctvom rozšírení. Visual Studio Code rozšírenia môžu pridať k celkovému zážitku ďalšie funkcie. Po vydaní tejto funkcie teraz môžete použiť Visual Studio Code rozšírenie na prácu s Power Pages.

Visual Studio Code rozšírenie pre Power Pages

Nástroje Power Platform Tools pridávajú možnosť konfigurovať webové stránky pomocou Visual Studio Code a používať vstavaný jazyk Liquid IntelliSense na umožnenie pomoci pri dokončovaní kódu, asistencie a nápovedy pri prispôsobovaní rozhrania webových stránok pomocou Visual Studio Code. Pomocou rozšírenia Visual Studio Code môžete portály konfigurovať aj prostredníctvom Microsoft Power Platform CLI.

Poznámka

  • Budete sa musieť uistiť, že node.js je stiahnutý a nainštalovaný na rovnakej pracovnej stanici ako Visual Studio Code, aby fungovali funkcie Power Pages.
  • Uistite sa, že sú nainštalované iba Power Platform Tools a nie obe Power Platform Tools a Power Platform Tools [PREVIEW ]. Pre ďalšie podrobnosti pozri známe problémy.

Animácia, ktorá vysvetľuje, ako nainštalovať a nastaviť Power Platform Tools.

Požiadavky

Pred použitím rozšírenia Visual Studio Code pre Power Pages musíte:

Inštalácia rozšírenia Visual Studio Code

Po inštalácii Visual Studio Code si musíte nainštalovať rozšírenie pre doplnok nástrojov Power Platform Tools pre Visual Studio Code.

Inštalácia rozšírenia Visual Studio Code:

  1. Otvorte Visual Studio Code.

  2. Vyberte položku Rozšírenia z ľavej tably.

    Rozšírenie Visual Studio Code.

  3. Stlačte ikonu Nastavenia v pravom hornom rohu na paneli rozšírení.

  4. Vyhľadajte a vyberte Power Platform Tools.

    Vyberte Power Platform Tools.

  5. Vyberte Nainštalovať.

  6. Skontrolujte, či je rozšírenie úspešne nainštalované zo stavových správ.

Stiahnite si obsah webovej stránky

Na autentifikáciu v porovnaní s prostredím Microsoft Dataverse a načítanie obsahu webovej stránky si pozrite návod Používanie Microsoft Power Platform CLI s Power Pages - stiahnutie obsahu webovej stránky.

Prepitné

Rozšírenie Power Platform Tools automaticky umožňuje použitie príkazov Microsoft Power Platform CLI z Visual Studio Code prostredníctvom Visual Studio integrovaného terminálu.

Ikony súborov

Prípona Visual Studio Code pre Power Pages automaticky identifikuje a zobrazuje ikony súborov a priečinkov vo vnútri stiahnutého obsahu webovej stránky.

Zoznam súborov na úvodnej šablóne so špecifickou ikonou témy pre jednotlivé webové stránky.

Visual Studio Code používa predvolený motív ikony súboru, ktorý nezobrazuje špecifické ikony Power Pages. Ak chcete zobraziť ikony súborov špecifické pre vaše webové stránky, budete musieť aktualizovať inštanciu Visual Studio Code, aby ste mohli používať motív ikony súboru špecifický pre Power Pages.

Povolenie motívu ikony súboru špecifickej pre portály:

  1. Otvorte Visual Studio Code.

  2. Prejdite na Súbor>Preferencie>Téma>Téma ikony súboru

  3. Vyberte tému pre Ikony PowerApps portálov.

    Vyberte tému pre ikony portálu Power Apps.

Živá ukážka

Rozšírenie Visual Studio Code umožňuje možnosť živého náhľadu na prezeranie obsahovej stránky Power Pages vnútri rozhrania Visual Studio Code v prostredí na vývoj.

Ak chcete zobraziť náhľad, vyberte tlačidlo Ukážka. vpravo hore, keď máte súbor HTML otvorený v režime úprav.

Ukážka stránky.

Na pravej strane upravovanej stránky sa otvorí tabla s ukážkou.

Obrazovka so zoznamom súborov, otvorený v editore Visual Studio Code a náhľad na pravej strane.

Funkcia náhľadu vyžaduje, aby boli ostatné súbory tiež otvorené v tej istej relácii Visual Studio Code, ktorá tvorí značku HTML na zobrazenie náhľadu. Napríklad ak sa otvorí iba súbor HTML bez otvorenia štruktúry priečinkov pomocou Visual Studio Code, zobrazí sa nasledujúca správa.

Spustenie prispievaného príkazu: „microsoft-powerapps-portals.preview-show“ zlyhalo.

Keď nastane tento problém, otvorte priečinok pomocou Súbor > Otvoriť priečinok a vyberte priečinok s obsahom stiahnutej webovej stránky, ktorý sa má otvoriť, skôr ako sa pokúsite znova zobraziť náhľad.

Automatické dokončovanie

Schopnosť automatického dopĺňania v rozšírení Visual Studio Code zobrazuje aktuálny upravovaný kontext a príslušné prvky automatického dopĺňania prostredníctvom technológie IntelliSense.

Príklad automatického doplňovania pre ID šablóny stránky.

Značky Liquid

Pri prispôsobovaní stiahnutého obsahu pomocou Visual Studio Code teraz môžete používať IntelliSense pre Power Pages Značky Liquid.

Začnite písaním a zobrazí sa zoznam značiek Liquid. Keď značku vyberiete, bude správne naformátovaná a pripravená na ďalšie zadávanie.

Zlomok kódu s príkladom dokončenia dynamickej značky Liquid.

Objekty Liquid

Môžete vidieť vyplnenia kódu Objekt Liquid zadaním {{ }}. S kurzorom umiestneným medzi zátvorkami vyberte <CTRL + space> pre zobrazenie zoznamu objektov Liquid, ktoré môžete vybrať. Ak má objekt viac vlastností, môžete zadať . a potom znova vybrať <CTRL + space>, aby ste videli špecifické vlastnosti objektu Liquid.

Zadanie objektu Liquid.

Značky šablón

Návrhy webových šablón Power Pages môžete zobraziť umiestnením kurzora do príkazu {include ' '} a výberom možnosti <CTRL> - space. Zobrazí sa zoznam existujúcich webových šablón, z ktorých si môžete vybrať.

Značky šablón.

Vytvárajte, odstraňujte a premenovávajte objekty webových stránok

V rámci Visual Studio Code môžete vytvoriť, odstrániť a premenovať nasledujúce komponenty webovej lokality:

  • Webové stránky
  • Šablóny stránok
  • Webové šablóny
  • Úryvky obsahu
  • Nové aktíva (Webové súbory)

Vytvorenie operácií

Na vytvorenie nových komponentov webovej lokality môžete použiť možnosti kontextového menu, pravým tlačidlom myši vyberte jeden z podporovaných objektov, vyberte Power Pages a vyberte typ objektu webovej lokality, ktorý chcete vytvoriť.

Prípadne môžete použiť príkazovú paletu Visual Studio Code výberom možnosti Ctrl + Shift + P.

Vytvorte nový objekt.

Na vytvorenie objektu budete musieť zadať viac parametrov.

Object Parametre
Webové stránky Názov, šablóna stránky, nadradená stránka
Šablóny stránok Názov, webová šablóna
Webové šablóny Name
Úryvky obsahu Názov a či bude zlomok kódu HTML alebo text.
Nové aktíva (Webové súbory) Názov, nadradená stránka a výber súboru na odovzdanie.

Operácie premenovať a odstrániť

Z navigácie v súbore môžete použiť kontextové menu na premenovanie alebo odstránenie Power Pages komponentov.

Poznámka

Vymazané objekty je možné obnoviť z koša na pracovnej ploche.

Obmedzenia

Nasledujúce obmedzenia v súčasnosti platia pre Power Platform Tools pre portály:

Pozrite si tiež

Power Pages podpora pre Microsoft Power Platform CLI (náhľad)