Folosește extensia Visual Studio Code

Visual Studio Code este un editor de cod sursă ușor și puternic pentru Windows, macOS și Linux. Suportă JavaScript, TypeScript și Node.js și are un ecosistem bogat de extensii pentru alte limbaje precum C++, C#, Java, Python, PHP și Go, precum și runtime precum .NET și Unity. Află mai multe despre Visual Studio Code în Începe cu VS Code.

Visual Studio Code îți permite să-ți extinzi capacitatea prin extensii. Extensiile Visual Studio Code pot adăuga mai multe funcționalități experienței generale. Odată cu lansarea acestei funcții, poți folosi acum extensia Visual Studio Code pentru a lucra cu Power Pages.

Extensia Visual Studio Code pentru Power Pages

Power Platform Tools adaugă capacitatea de a configura site-uri web folosind Visual Studio Code și de a folosi limbajul Liquid integrat IntelliSense permițând ajutor la completarea codului, asistență și hinting, personalizând interfața site-ului folosind Visual Studio Code. Folosind extensia Visual Studio Code, poți configura și portaluri prin Microsoft Power Platform CLI.

Notă

Trebuie să te asiguri că node.js este descărcat și instalat pe aceeași stație de lucru cu Visual Studio Code pentru ca funcțiile Power Pages să funcționeze.
Asigurați-vă că sunt instalate doar Power Platform Tools, nu și Power Platform Tools, și Power Platform Tools [VERSIUNE PRELIMINARĂ]. Consultați problemele cunoscute pentru detalii.

Animație care explică modul de instalare și setare pentru Power Platform Tools.

Cerințe preliminare

Înainte de a folosi extensia Visual Studio Code pentru Power Pages, trebuie să:

Descarcă, instalează și configurează Visual Studio Code. Mai multe informații: Descarcă Visual Studio Code
Configurează-ți mediul și sistemul pentru suportul Power Pages CI/CD folosind CLI. Mai multe informații: Microsoft Power Platform CLI (previzualizare)

Instalează extensia Visual Studio Code

După ce instalezi Visual Studio Code, trebuie să instalezi extensia pentru plug-in-ul Power Platform Tools pentru Visual Studio Code.

Pentru a instala extensia Visual Studio Code:

Deschide Visual Studio Code.
Selectați Extensii din panoul din stânga.
Selectați pictograma Setări din partea dreaptă sus din panoul de extensii.
Căutați și selectați Power Platform Tools.

Selectați Power Platform Tools.
Selectați Instalare.
Verificați dacă extensia este instalată cu succes din mesajele privind starea.

Sfat

Extensia Power Platform Tools permite automat utilizarea comenzilor Microsoft Power Platform CLI din Visual Studio Code până la Visual Studio Integrated Terminal.

Power Pages Acțiuni

Power Pages Acțiunile simplifică gestionarea site-ului și reduc dependența de comenzile CLI Microsoft Power Platform. Power Pages Acțiuni este disponibil în panoul intitulat Power Pages Acțiuni în bara laterală Explorer a Visual Studio Code.

În cadrul acestui panou, site-urile sunt clasificate după cum urmează:

Site-uri active: Site-uri disponibile și active în prezent în mediul selectat.
Site-uri inactive: Site-uri prezente în mediu, dar care nu sunt active în prezent.
Alte site-uri: Site-uri descărcate local, dar care nu sunt încă asociate cu mediul selectat.

Medii în schimbare

Pentru a schimba mediile:

Selectează butonul Change Environment din panoul Power Pages Acțiuni.

Schimbați mediul pentru site-uri
Selectați mediul dorit din lista afișată.

Când selectați un mediu, lista de site-uri se actualizează automat.

Acțiuni pentru site-uri

Diferite tipuri de site-uri oferă acțiuni specifice contextului, pe care le puteți accesa făcând clic dreapta.

Acțiuni Site-uri active

Faceți clic dreapta pe Site-uri active pentru a accesa următoarele acțiuni:

Previzualizare: Șterge memoria cache și deschide site-ul în VS Code pentru previzualizare imediată.
Încărcare: Încarcă modificările locale înapoi în mediul dvs.
Descărcare: Descarcă conținutul site-ului într-un folder local pentru editare offline.
Detalii site: Afișează informații detaliate despre site.
Afișare în Explorer: Navighează la directorul local care conține codul site-ului.
Deschide în studioul Power Pages design: Deschide site-ul în studioul Power Pages design.
Rulați screeningul CodeQL: Efectuați analize statice ale codului pe fișiere HTML și JavaScript pentru a identifica vulnerabilitățile din baza de cod folosind CodeQL. Această opțiune este disponibilă numai pentru site-urile care sunt descărcate local, indicate de eticheta Curent din lista de site-uri active.
Compară cu Local: Deschide o vizualizare de comparație pentru a identifica diferențele dintre spațiul tău local de lucru și mediul remote. Vezi mai multe detalii despre funcția de comparare a configurării locațiilor.

Acțiuni Site-uri inactive

Site-urile inactive oferă următoarele acțiuni:

Open Site Management: Deschide site-ul în aplicația de management Power Pages.
Detalii despre site: Oferă informații detaliate despre site-ul selectat, cum ar fi ID-ul site-ului, URL-ul site-ului, versiunea modelului de date și altele.

Alte acțiuni ale site-urilor

Site-urile stocate local, dar care nu se află încă în mediul dvs., oferă următoarele acțiuni:

Încărcare site: Încarcă site-ul local în mediul conectat. După încărcare, site-ul apare în lista Inactive Sites, unde îl poți activa din Power Pages home.
Afișare în Explorer: Navighează la directorul local care conține codul site-ului.

Pictogramele fișierului

Extensia Visual Studio Code pentru Power Pages identifică automat și afișează pictograme pentru fișierele și folderele din conținutul site-ului descărcat.

Lista fișierelor dintr-un șablon de pornire cu tema pictogramei fișierului specifică site-urilor web.

Visual Studio Code folosește tema implicită file icon theme care nu afișează Power Pages pictograme specifice. Pentru a vizualiza pictograme de fișiere specifice site-urilor tale, trebuie să actualizezi instanța Visual Studio Code pentru a folosi tema pictogramei specifice fișierului Power Pages.

Pentru a activa o temă de pictogramă fișier specifică portalurilor:

Deschide Visual Studio Code.
Mergi laPreferințefișierTemăPictogramă Temă.
Selectați tema pentru pictogramele de portaluri PowerApps.

Previzualizarea site-ului

Acțiunea de previzualizare folosește extensia DevTools Microsoft Edge pentru Visual Studio Code pentru a oferi o previzualizare a site-ului în editor. Această funcție rulează Microsoft Edge DevTools și un browser Microsoft Edge integrat cu emulare de dispozitiv chiar în VS Code, oferindu-ți aproape toate capabilitățile de depanare și inspecție ca în întregul Microsoft Edge DevTools.

Previzualizarea afișează întotdeauna modificările pe care le-ați încărcat pe site, așa că asigurați-vă că ați încărcat orice modificări locale înainte de a-l deschide. De fiecare dată când lansați previzualizarea, memoria cache a site-ului se șterge automat pentru a vă asigura că vizualizați cele mai recente actualizări.

Pentru a deschide previzualizarea, faceți clic dreapta pe site-ul activ sub Power Pages Acțiuni și selectați Previzualizare. Această acțiune deschide browserul Microsoft Edge integrat, indicând către site-ul ales.

Captură de ecran a acțiunii de previzualizare a site-ului Power Pages.

Panoul de previzualizare se deschide în partea dreaptă.

Captură de ecran care arată lista de fișiere, fișierul deschis în editorul Visual Studio Code și o previzualizare în partea dreaptă.

Compară configurația sitului

Folosește opțiunea Compară cu Local pentru a identifica diferențele dintre spațiul tău local de lucru și configurația locației live din mediul remote. Această funcție vă ajută să detectați modificări neintenționate, să depanați probleme specifice mediului și să mențineți consistența înainte de a sincroniza configurațiile site-ului.

Când selectezi această acțiune, se deschide o secțiune Comparație a Site-ului sub secțiunea Tools în vizualizarea Power Pages Acțiuni. Această secțiune afișează toate fișierele din spațiul tău local de lucru care diferă de mediu, evidențiind:

Adăugat: Fișiere noi create în spațiul de lucru local care nu există în mediu.
Modificate: Fișiere în care codul sau metadatele diferă între versiunea locală și cea de mediu.
Șters: Fișiere care au fost eliminate din spațiul de lucru local, dar care încă există în mediu.

Pentru a compara configurația unui site live cu spațiul de lucru local:

În bara laterală Explorer, extinde panoul Power Pages Acțiuni.
În lista Active/Inactive Sites , faceți clic dreapta pe site-ul pe care doriți să-l comparați.
Selectează Compară cu Local.

Captură de ecran care arată opțiunea Compară cu localul în lista site-ului.

Pentru a compara un folder specific:

În bara laterală Explorer, selectează un folder (cum ar fi ) din spațiul tău local de lucru.
Faceți clic dreapta și selectați Power Pages>Comparați cu Mediul.

Captură de ecran care arată opțiunea de comparare în folderul spațiului de lucru local.

Rezultatele comparațiilor de gestionare

Odată ce fila de Comparare a Site-urilor este activă cu modificările, poți da click dreapta pe lista de comparații pentru a accesa acțiuni suplimentare:

Open All Diffs: Deschide editorul de diferențe Visual Studio Code pentru fiecare fișier din listă pentru a revizui toate modificările simultan.
Comparație de reîmprospătare: Rescanează spațiul de lucru local și mediul remote pentru a actualiza lista cu cele mai recente modificări.
Export ca raport HTML: Generează un document HTML partajabil care detaliază toate diferențele detectate.
Exportă ca JSON: Exportă datele de comparație în format JSON pentru fluxuri de lucru automate sau rapoarte personalizate. Poți partaja acest fișier exportat cu membrii echipei, care îl pot importa în propria vizualizare făcând clic dreapta pe secțiunea Comparare a Site-ului și selectând opțiunea Import Comparație .
Elimină toate modificările locale: Anulează toate modificările locale pentru a se potrivi cu versiunea existentă în mediul remote.
Elimină Comparația: Închide sesiunea curentă de comparație și șterge fila de rezultate.

Sfat

Exportarea și partajarea datelor de comparație ca JSON permite echipei tale să colaboreze pentru rezolvarea diferențelor de configurație fără a necesita ca toată lumea să fie conectată la același mediu.

Captură de ecran care arată opțiuni disponibile în fila de comparare a site-urilor

Completare automată

Capacitatea de autocompletare din extensia Visual Studio Code arată contextul curent care este editat și elementele relevante de autocompletare prin IntelliSense.

Captură de ecran cu un exemplu de completare automată pentru ID-ul șablonului de pagină.

Etichete Liquid

Când personalizezi conținutul descărcat folosind Visual Studio Code, acum poți folosi IntelliSense pentru etichete Power Pages Liquid.

Începeți să tastați pentru a vedea o listă de etichete Liquid. Selectați o etichetă pentru a o formata corect și continuați cu introducerea datelor.

Captură de ecran a unui fragment cu un exemplu de completare a etichetelor Liquid.

Obiecte Liquid

Puteți vedea completări de cod pentru obiectul Liquid introducând . Cu cursorul plasat între paranteze, selectați pentru a afișa o listă de obiecte Liquid pe care le puteți selecta. Dacă obiectul are mai multe proprietăți, puteți introduce a . și apoi selectați din nou pentru a vedea proprietățile specifice ale obiectului Liquid.

Captura de ecran arată intrarea într-un obiect Liquid.

Etichete de șablon

Poți vedea sugestiile Power Pages șabloane web plasând cursorul în instrucțiunea {include ' '} și selectând <CTRL> - space. Apare o listă de șabloane web existente pe care le puteți selecta.

Captură de ecran cu etichetele șablonului.

Creați, ștergeți și redenumiți obiectele site-ului web

Din Visual Studio Code, poți crea, șterge și redenumi următoarele componente ale site-ului:

Pagini web
Șabloane de pagini
Șabloane web
Fragmente de conținut
Active noi (fișiere web)

Creați operațiuni

Puteți utiliza opțiunile din meniul contextual pentru a crea noi componente ale site-ului web. Faceți clic dreapta pe unul dintre obiectele suportate, alegeți Power Pages și selectați tipul de obiect web pe care doriți să-l creați.

Alternativ, poți folosi paleta de comenzi Visual Studio Code selectând Ctrl + Shift + P.

Creați un nou obiect.

Trebuie să specificați mai mulți parametri pentru a crea obiectul.

Obiect	Parametri
Pagini web	Nume, șablon de pagină, pagină părinte
Șabloane de pagini	Nume, șablon web
Șabloane web	Nume
Fragmente de conținut	Nume și dacă fragmentul va fi HTML sau text.
Active noi (fișiere web)	Nume, pagina părinte și selectați fișierul de încărcat.

Operațiunile de redenumire și ștergere

Din navigarea fișierelor, poți folosi meniul contextual pentru a redenumi sau șterge componente Power Pages.