Použijte rozšíření Visual Studio Code

Visual Studio Code je jednoduchý a výkonný editor zdrojového kódu pro Windows, macOS a Linux. Podporuje JavaScript, TypeScript a Node.js a má bohatý ekosystém rozšíření pro další jazyky, jako jsou C++, C#, Java, Python, PHP a Go a moduly runtime, jako jsou .NET a Unity. Další informace o Visual Studio Code naleznete v Začínáme s VS Code.

Visual Studio Code umožňuje rozšířit možnosti prostřednictvím extensions. rozšíření Visual Studio Code můžou do celkového prostředí přidávat další funkce. S vydáním této funkce teď můžete pomocí rozšíření Visual Studio Code pracovat s Power Pages.

rozšíření Visual Studio Code pro Power Pages

Nástroje Power Platform Tools přidávají možnost konfigurovat weby pomocí Visual Studio Code a využívat integrovaný jazyk Liquid ve spolupráci s IntelliSense, což umožňuje nápovědu při dokončování kódu, asistenci a rady při přizpůsobení rozhraní webů ve Visual Studio Code. Pomocí rozšíření Visual Studio Code můžete portály nakonfigurovat také prostřednictvím rozhraní příkazového řádku Microsoft Power Platform.

Note

• Potřebujete zajistit, aby se node.js stáhl a nainstaloval na stejnou pracovní stanici jako Visual Studio Code, aby funkce Power Pages fungovaly.
• Musíte mít instalovánu pouze aplikaci Power Platform Tools, a nikoli obě aplikace Power Platform Tools a Power Platform Tools [PREVIEW]. Další informace najdete v tématu Známé problémy.

Předpoklady

Před použitím rozšíření Visual Studio Code pro Power Pages musíte:

• Stáhněte, nainstalujte a nakonfigurujte Visual Studio Code. Další informace: Stáhnout Visual Studio Code

• Nakonfigurujte prostředí a systém pro podporu Power Pages CI/CD pomocí rozhraní příkazového řádku. Další informace: Microsoft Power Platform CLI (Preview)

Instalace rozšíření Visual Studio Code

Po instalaci Visual Studio Code je potřeba nainstalovat rozšíření pro modul plug-in nástroje Power Platform pro Visual Studio Code.

Instalace rozšíření Visual Studio Code:

1. Otevřete Visual Studio Code.

2. V levém podokně vyberte Rozšíření .

   

3. V pravém horním rohu podokna rozšíření vyberte ikonu Nastavení .

4. Vyhledejte a vyberte Power Platform Tools.

   

5. Vyberte Instalovat.

6. Podle stavových zpráv ověřte, zda bylo rozšíření úspěšně nainstalováno.

Tip

Rozšíření Power Platform Tools automaticky umožňuje používat příkazy rozhraní příkazového řádku Microsoft Power Platform z Visual Studio Code prostřednictvím integrovaného terminálu Visual Studio integrovaného terminálu.

Akce Power Pages

Power Pages akce zjednodušují správu webu a snižují závislost na příkazech Microsoft Power Platform CLI. Power Pages Actions jsou k dispozici v podokně s názvem Power Pages Actions na postranním panelu Průzkumníka Visual Studio Code.

V tomto podokně jsou následujícím způsobem weby rozděleny do kategorií:

• Aktivní weby: Weby, které jsou aktuálně dostupné a aktivní ve vybraném prostředí.
• Neaktivní weby: Weby, které jsou přítomné v prostředí, ale nejsou aktuálně aktivní.
• Jiné weby: Weby stažené místně, ale ještě nejsou přidružené k vybranému prostředí.

Změna prostředí

Přepnutí prostředí:

1. V podokně Akce Power Pages vyberte tlačítko Změnit prostředí.

   

2. V zobrazeném seznamu vyberte požadované prostředí.

Když vyberete prostředí, seznam webů se automaticky aktualizuje.

Akce webů

Různé typy webů poskytují kontextově specifické akce, ke kterým se dostanete kliknutím pravým tlačítkem myši.

Akce aktivních webů

Kliknutím pravým tlačítkem na Aktivní weby získáte přístup k následujícím akcím:

• Náhled: Vymaže mezipaměť a otevře web v prostředí VS Code pro okamžitý náhled.
• Nahrát: Nahraje místní změny zpět do vašeho prostředí.
• Stáhnout: Stáhne obsah webu do místní složky pro offline úpravy.
• Údaje o webu: Zobrazí podrobné informace o webu.
• Zobrazit v Průzkumníku: Přejde do místního adresáře obsahujícího kód webu.
• Otevřít v návrhovém studiu Power Pages: Otevře web v nástroji Power Pages Design Studio.
• Spusťte screening CodeQL: Proveďte statickou analýzu kódu v souborech HTML a JavaScript k identifikaci slabin zabezpečení ve vaší základně kódu pomocí CodeQL. Tato možnost je dostupná jenom pro weby, které se stahují místně, označené aktuální značkou v seznamu aktivních webů.
• Porovnat s místním prostředím: Otevře zobrazení porovnání pro identifikaci rozdílů mezi místním pracovním prostorem a vzdáleným prostředím. Podívejte se na další podrobnosti o funkci porovnání konfigurace lokality.

Akce neaktivních webů

Neaktivní weby poskytují tyto akce:

• Open Site Management: Otevře web v aplikaci pro správu Power Pages.
• Podrobnosti o webu: Poskytuje podrobné informace o vybraném webu, jako je ID webu, adresa URL webu, verze datového modelu a další.

Akce ostatních webů

Weby, které jsou uložené místně, ale ještě nejsou ve vašem prostředí, nabízejí následující akce:

• Nahrát web: Nahraje místní web do připojeného prostředí. Po nahrání se web zobrazí v seznamu Neaktivní weby, kde ho můžete aktivovat z Power Pages domovské stránky.
• Zobrazit v Průzkumníku: Přejde do místního adresáře obsahujícího kód webu.

Ikony souboru

Rozšíření Visual Studio Code pro Power Pages automaticky identifikuje a zobrazuje ikony pro soubory a složky uvnitř staženého obsahu webu.

Visual Studio Code používá výchozí motiv ikony souboru , který nezobrazuje Power Pages konkrétní ikony. Pokud chcete zobrazit ikony souborů specifické pro vaše weby, musíte aktualizovat instanci Visual Studio Code tak, aby používala motiv ikony konkrétního souboru Power Pages.

Postup povolení motivu ikon souborů pro konkrétní portál:

1. Otevřete Visual Studio Code.

2. Jděte na Soubor>Předvolby>Téma>Téma ikony souboru.

3. Vyberte motiv pro Ikony portálů PowerApps.

   

Náhled webu

Akce náhledu používá rozšíření Microsoft Edge DevTools pro Visual Studio Code k poskytnutí náhledu webu v editoru. Tato funkce umožňuje spuštění nástroje Microsoft Edge DevTools a vloženého prohlížeče Microsoft Edge s emulací zařízení přímo v rámci VS Code, což poskytuje téměř všechny možnosti ladění a inspekce, které se nacházejí ve plně funkčním Microsoft Edge DevTools.

V náhledu se vždy zobrazují změny, které jste nahráli na svůj web, takže se ujistěte, že jste před otevřením webu odeslali všechny místní úpravy. Pokaždé, když spustíte verzi Preview, mezipaměť webu se automaticky vymaže, abyste měli jistotu, že zobrazíte nejnovější aktualizace.

Pokud chcete otevřít náhled, klikněte pravým tlačítkem myši na aktivní web v části Power Pages Akce a vyberte Preview. Tato akce otevře vložený Microsoft Edge prohlížeč odkazující na vybraný web.

Podokno náhledu se otevře na pravé straně.

Porovnání konfigurace lokality

Pomocí možnosti Porovnat s místním prostředím můžete identifikovat rozdíly mezi místním pracovním prostorem a konfigurací živé lokality ve vzdáleném prostředí. Tato funkce vám pomůže rozpoznat nezamýšlené změny, řešit problémy specifické pro prostředí a udržovat konzistenci před synchronizací konfigurací lokality.

Když vyberete tuto akci, otevře se oddíl Porovnání webů pod Nástroje v zobrazení akce Power Pages. Tato část zobrazuje všechny soubory v místním pracovním prostoru, které se liší od prostředí, a zvýrazňuje:

• Přidáno: Nové soubory vytvořené v místním pracovním prostoru, které v prostředí neexistují.
• Změněno: Soubory, ve kterých se kód nebo metadata liší mezi místními verzemi a verzemi prostředí.
• Odstraněno: Soubory, které byly odebrány z místního pracovního prostoru, ale stále existují v prostředí.

Porovnání konfigurace živého webu s místním pracovním prostorem:

1. Na bočním panelu prozkoumávače rozbalte podokno Akce Power Pages.
2. V seznamu Aktivní/Neaktivní weby klikněte pravým tlačítkem myši na web, který chcete porovnat.
3. Vyberte Porovnejte s místní verzí.

Porovnat konkrétní složku:

1. Na postranním panelu Průzkumníka vyberte složku (například web-pages) z místního pracovního prostoru.
2. Klikněte pravým tlačítkem a vyberte Power Pages>Porovnání s prostředím.

Správa výsledků porovnání

Jakmile je karta Porovnání webů aktivní se změnami, můžete kliknutím pravým tlačítkem myši na seznam porovnání získat přístup k dalším akcím:

• Otevřít všechny rozdíly: Otevře editor rozdílů Visual Studio Code pro každý soubor v seznamu pro souběžnou kontrolu všech změn.
• Porovnání aktualizací: Znovu zkontroluje místní pracovní prostor a vzdálené prostředí a aktualizuje seznam nejnovějšími změnami.
• Exportovat jako sestavu HTML: Vygeneruje sdílený dokument HTML s podrobnostmi o všech detekovaných rozdílech.
• Export jako JSON: Exportuje porovnávací data ve formátu JSON pro automatizované pracovní postupy nebo vlastní vytváření sestav. Tento exportovaný soubor můžete sdílet s členy týmu, kteří ho můžou importovat do vlastního zobrazení, a to tak, že kliknete pravým tlačítkem na oddíl Porovnání webů a vyberete možnost Porovnání importu .
• Zahodit všechny místní změny: Vrátí všechny místní úpravy tak, aby odpovídaly verzi, která je aktuálně ve vzdáleném prostředí.
• Odebrat porovnání: Zavře aktuální relaci porovnání a vymaže kartu výsledků.

Tip

Export a sdílení srovnávacích dat ve formátu JSON umožňuje vašemu týmu spolupracovat na řešení rozdílů v konfiguraci, aniž by museli být všichni připojení ke stejnému prostředí.

Automatické dokončování

Funkce automatického dokončování v rozšíření Visual Studio Code zobrazuje aktuální kontext, který se upravuje, a relevantní prvky automatického dokončování prostřednictvím technologie IntelliSense.

Značky Liquid

Při přizpůsobování staženého obsahu pomocí Visual Studio Code nyní můžete používat IntelliSense pro značky Liquid na Power Pages.

Když začněte psát, zobrazí se seznam značek Liquid. Vyberte značku, kterou chcete správně naformátovat, a dále pište.

Objekty Liquid

Zadáním se zobrazí dokončení kódu {{ }}. S kurzorem umístěným mezi závorkami vyberte <CTRL + space> pro zobrazení seznamu objektů Liquid, které můžete vybrat. Pokud má objekt více vlastností, můžete zadat . a poté znovu vybrat <CTRL + space>, abyste zobrazili konkrétní vlastnosti objektu Liquid.

Značky šablon

Návrhy webové šablony Power Pages můžete zobrazit tak, že umístíte kurzor do příkazu {include ' '} a vyberete <CTRL> - space. Zobrazí se seznam existujících webových šablon, ze kterých můžete vybrat.

Vytváření, odstraňování a odebírání webových objektů

V rámci Visual Studio Code můžete vytvářet, odstraňovat a přejmenovávat následující součásti webu:

• Webové stránky
• Šablony stránek
• Webové šablony
• Fragmenty obsahu
• Nové prostředky (webové soubory)

Vytvořit operace

Pomocí kontextové nabídky můžete vytvářet nové webové komponenty. Klikněte pravým tlačítkem myši na některý z podporovaných objektů, zvolte Power Pages a vyberte typ objektu webu, který chcete vytvořit.

Případně můžete použít paletu příkazů Visual Studio Code tak, že vyberete Ctrl + Shift + P.

K vytvoření objektu musíte zadat více parametrů.

Object	Parameters
Webové stránky	Název, šablona stránky, nadřazená stránka
Šablony stránek	Název, webová šablona
Webové šablony	název
Fragmenty obsahu	Název a zda bude fragment kódu HTML nebo text.
Nové prostředky (webové soubory)	Název, nadřazená stránka a výběr souboru k nahrání.

Přejmenování a odstranění operací

V navigaci v souboru můžete pomocí místní nabídky přejmenovat nebo odstranit komponenty Power Pages.

Note

Odstraněné objekty lze obnovit z koše na desktopu.

Limitations

Následující omezení v současné době platí pro Power Platform Tools pro portály:

• Funkce Automatické dokončování mají pouze omezenou funkčnost.

Související informace

Podpora Power Pages pro Microsoft Power Platform CLI (Preview)