Utilitza l'extensió Visual Studio Code

Visual Studio Code és un editor de codi font lleuger i potent per a Windows, macOS i Linux. Suporta JavaScript, TypeScript i Node.js i disposa d'un ecosistema ric d'extensions per a altres llenguatges com C++, C#, Java, Python, PHP i Go, i en temps d'execució com .NET i Unity. Aprèn més sobre Visual Studio Code a Comença amb VS Code.

Visual Studio Code et permet ampliar la teva capacitat a través de extensions. Les extensions de Visual Studio Code poden afegir més funcionalitats a l'experiència global. Amb el llançament d'aquesta funció, ara pots utilitzar l'extensió Visual Studio Code per treballar amb Power Pages.

Extensió Visual Studio Code per a Power Pages

El Power Platform Tools afegeix la capacitat de configurar llocs web utilitzant Visual Studio Code i utilitzar el llenguatge Liquid integrat IntelliSense permetent ajuda amb la completació de codi, assistència i suggeriments mentre es personalitza la interfície dels llocs web amb Visual Studio Code. Amb l'extensió Visual Studio Code, també pots configurar portals a través de la Microsoft Power Platform CLI.

Nota

Has d'assegurar-te que node.js estigui descarregat i instal·lat a la mateixa estació de treball que Visual Studio Code perquè les funcions de Power Pages funcionin.
Assegureu-vos que només hi ha Power Platform Tools instal·lat i que no sigui Power Platform Tools ni Power Platform Tools [versió preliminar]. Vegeu els problemes coneguts per obtenir més informació.

Animació que explica com instal·lar i definir Power Platform Tools.

Requisits previs

Abans d'utilitzar l'extensió Visual Studio Code per a Power Pages, has de:

Descarrega, instal·la i configura Visual Studio Code. Més informació: Descarrega Visual Studio Code
Configura el teu entorn i sistema per al suport de Power Pages CI/CD utilitzant CLI. Més informació: Microsoft Power Platform CLI (previsualització)

Instal·la l'extensió Visual Studio Code

Després d'instal·lar Visual Studio Code, has d'instal·lar l'extensió del connector Power Platform tools per a Visual Studio Code.

Per instal·lar l'extensió Visual Studio Code:

Obre Visual Studio Code.
Seleccioneu Extensions a la subfinestra esquerra.
Seleccioneu la icona Configuració a la part superior dreta de la subfinestra d'extensions.
Cerqueu i seleccioneu Power Platform Tools.

Seleccioneu Power Platform Tools.
Seleccioneu Instal·la.
Comproveu que l'extensió s'hagi instal·lat correctament des dels missatges d'estat.

Propina

L'extensió Power Platform Tools permet automàticament utilitzar comandes Microsoft Power Platform CLI des de Visual Studio Code fins a Visual Studio Integrated Terminal.

Power Pages Accions

Power Pages Les accions optimitzen la gestió del lloc i redueixen la dependència de les ordres CLI Microsoft Power Platform. Power Pages Accions està disponible al panell titulat Power Pages Accions a la barra lateral de l'Explorador de Visual Studio Code.

Dins d'aquest tauler, els llocs es classifiquen de la següent manera:

Llocs actius: llocs que estan disponibles i actius actualment a l'entorn seleccionat.
Llocs inactius: llocs que estan presents a l'entorn però que no estan actius actualment.
Altres llocs: llocs baixats localment però encara no associats a l'entorn seleccionat.

Entorns canviants

Per canviar d'entorn:

Selecciona el botó Canvia d'entorn dins del panell d'Accions Power Pages.

Canviar l'entorn dels llocs
Seleccioneu l'entorn desitjat de la llista que es mostra.

Quan seleccioneu un entorn, la llista de llocs s'actualitza automàticament.

Accions per a llocs

Els diferents tipus de llocs proporcionen accions específiques del context a les quals podeu accedir fent clic amb el botó dret.

Accions de llocs web actius

Feu clic amb el botó dret a Llocs actius per accedir a les accions següents:

Visualització prèvia: esborra la memòria cau i obre el lloc dins del VS Code per a la visualització prèvia immediata.
Carrega: carrega els canvis locals al vostre entorn.
Baixa: baixa el contingut del lloc a una carpeta local per editar-lo fora de línia.
Detalls del lloc: mostra informació detallada sobre el lloc.
Revela a l'Explorador: navega al directori local que conté el codi del lloc.
Obre en Power Pages estudi de disseny: Obre el lloc a Power Pages estudi de disseny.
Executeu la detecció de CodeQL: realitzeu anàlisis de codi estàtic en fitxers HTML i JavaScript per identificar vulnerabilitats a la vostra base de codi mitjançant CodeQL. Aquesta opció només està disponible per als llocs que es baixen localment, indicades per l'etiqueta Actual a la llista de llocs actius.
Compara amb Local: Obre una vista de comparació per identificar diferències entre el teu espai de treball local i l'entorn remot. Vegeu més detalls sobre la funció de configuració de comparació de llocs.

Accions de llocs web inactius

Els llocs web inactius proporcionen les accions següents:

Open Site Management: Obre el lloc dins de l'aplicació de gestió Power Pages.
Detalls del lloc: Proporciona informació detallada sobre el lloc seleccionat, com ara l'ID del lloc web, l'URL del lloc web, la versió del model de dades i més.

Altres accions de Sites

Els llocs emmagatzemats localment però encara no al vostre entorn ofereixen les accions següents:

Carrega el lloc: carrega el lloc local a l'entorn connectat. Després de pujar-lo, el lloc apareix a la llista de Llocs Inactius, on pots activar-lo des de Power Pages Home.
Revela a l'Explorador: navega al directori local que conté el codi del lloc.

Icones de fitxer

L'extensió Visual Studio Code per a Power Pages identifica i mostra automàticament icones per a fitxers i carpetes dins del contingut descarregat del lloc web.

Llista de fitxers d'una plantilla d'inici amb un tema d'icones de fitxer específic del lloc web,

Visual Studio Code utilitza el tema per defecte d'icones arxiu que no mostra Power Pages icones específiques. Per veure icones de fitxer específiques dels teus llocs web, has d'actualitzar la instància de Visual Studio Code per utilitzar el tema d'icones de fitxer específic de Power Pages.

Per habilitar un tema d'icones de fitxer específic dels portals:

Obre Visual Studio Code.
Ves aPreferènciesde fitxer, Tema, Fitxer Icona, Tema.
Seleccioneu el tema per a les icones dels portals del PowerApps.

Visualització prèvia del lloc

L'acció de previsualització utilitza l'extensió DevTools Microsoft Edge per a Visual Studio Code per proporcionar una previsualització del lloc dins de l'editor. Aquesta funció executa Microsoft Edge DevTools i un navegador Microsoft Edge integrat amb emulació de dispositiu directament dins de VS Code, oferint-te gairebé totes les mateixes capacitats de depuració i inspecció que es troben en el Microsoft Edge DevTools complet.

La previsualització sempre mostra els canvis que heu penjat al vostre lloc web, així que assegureu-vos d'enviar els canvis locals abans d'obrir-lo. Cada vegada que inicieu la visualització prèvia, la memòria cau del lloc s'esborra automàticament per assegurar-vos que visualitzeu les actualitzacions més recents.

Per obrir la previsualització, fes clic dret al teu lloc actiu sota Power Pages Accions i selecciona Previsualització. Aquesta acció obre el navegador Microsoft Edge integrat i apunta al lloc que hagis triat.

Captura de pantalla de l'acció de previsualització Power Pages del lloc.

La subfinestra de visualització prèvia s'obre a la part dreta.

Captura de pantalla que mostra la llista de fitxers, l'obertura del fitxer a Visual Studio Code'editor i una previsualització a la dreta.

Comparar la configuració del lloc

Utilitza l'opció Comparar amb Local per identificar diferències entre el teu espai de treball local i la configuració del lloc en viu a l'entorn remot. Aquesta funció t'ajuda a detectar canvis no desitjats, a resoldre problemes específics de l'entorn i a mantenir la coherència abans de sincronitzar la configuració del teu lloc.

Quan selecciones aquesta acció, s'obre una secció Comparativa de Centres sota la Tools a la vista Power Pages Accions. Aquesta secció mostra tots els fitxers del teu espai de treball local que difereixen de l'entorn, ressaltant:

Afegit: Nous fitxers creats a l'espai de treball local que no existeixen a l'entorn.
Modificat: Fitxers on el codi o les metadades difereixen entre la versió local i l'entorn.
Eliminat: Fitxers que han estat eliminats de l'espai de treball local però que encara existeixen a l'entorn.

Per comparar la configuració d'un lloc en temps real amb l'espai de treball local:

A la barra lateral de l'Explorador, expandeix el panell Power Pages Accions.
A la llista de Llocs Actius/Inactius , fes clic dret sobre el lloc que vols comparar.
Selecciona Comparar amb Local.

Captura de pantalla que mostra l'opció Comparar amb local a la llista del lloc.

Per comparar una carpeta específica:

A la barra lateral de l'Explorador, selecciona una carpeta (com ara ) des del teu espai de treball local.
Fes clic dret i selecciona Power Pages>Compara amb Entorn.

Captura de pantalla que mostra l'opció de comparar a la carpeta de l'espai de treball local.

Resultats de comparació de gestió

Un cop la pestanya de Comparació de Llocs estigui activa amb els canvis, pots fer clic dret a la llista de comparació per accedir a accions addicionals:

Obre tots els diferències: Obre l'editor de diferencials de Visual Studio Code per a cada fitxer de la llista per revisar tots els canvis simultàniament.
Comparació de refrescos: Reescaneja l'espai de treball local i l'entorn remot per actualitzar la llista amb els últims canvis.
Exportar com a informe HTML: Genera un document HTML compartible detallant totes les diferències detectades.
Exporta com a JSON: Exporta les dades de comparació en format JSON per a fluxos de treball automatitzats o informes personalitzats. Pots compartir aquest fitxer exportat amb els membres de l'equip, que poden importar-lo a la seva pròpia vista fent clic dret a la secció de Comparació de llocs i seleccionant l'opció Importar Comparació .
Descarta tots els canvis locals: Reverteix totes les edicions locals perquè coincideixin amb la versió actualment a l'entorn remot.
Elimina la comparació: Tanca la sessió de comparació actual i esborra la pestanya de resultats.

Propina

Exportar i compartir dades comparatives com a JSON permet al teu equip col·laborar per resoldre diferències de configuració sense requerir que tothom estigui connectat al mateix entorn.

Captura de pantalla que mostra les opcions disponibles a la pestanya de comparació de llocs

Emplenament automàtic

La capacitat d'autocompletat de l'extensió Visual Studio Code mostra el context actual que s'està editant i els elements d'autocompletat rellevants a través d'IntelliSense.

Captura de pantalla amb un exemple d'emplenament automàtic per a l'identificador de la plantilla de pàgina.

Etiquetes de Liquid

Quan personalitzes el contingut descarregat amb Visual Studio Code, ara pots utilitzar IntelliSense per a Power Pages Liquid.

Comenceu a escriure per veure una llista d'etiquetes de Liquid. Seleccioneu una etiqueta per formatar-la correctament i continuar amb la vostra entrada.

Captura de pantalla d'un fragment amb un exemple d'emplenament d'etiquetes Liquid.

Objectes de Liquid

Podeu veure les finalitzacions del codi d'objectes de Liquid introduint . Amb el cursor col·locat entre els claudàtors, seleccioneu per visualitzar una llista d'objectes de Liquid que podeu seleccionar. Si l'objecte té més propietats, podeu introduir un . i, a continuació, torneu a seleccionar per veure propietats específiques de l'objecte de Liquid.

La captura de pantalla mostra la introducció d'un objecte Liquid.

Etiquetes de plantilla

Pots veure Power Pages suggeriments de plantilles web col·locant el cursor a la instrucció {include ' '} i seleccionant <CTRL> - space. Apareixerà una llista de plantilles web existents per seleccionar-les.

Captura de pantalla de les etiquetes de plantilla.

Crear, suprimir i canviar el nom d'objectes de lloc web

Des de Visual Studio Code, pots crear, eliminar i reanomenar els següents components del lloc web:

Pàgines web
Plantilles de pàgina
Plantilles web
Fragments de contingut
Actius nous (fitxers web)

Crear operacions

Podeu utilitzar les opcions del menú contextual per crear nous components del lloc web. Fes clic dret en un dels objectes suportats, tria Power Pages i selecciona el tipus d'objecte web que vols crear.

Alternativament, pots utilitzar la paleta de comandes Visual Studio Code seleccionant Ctrl + Shift + P.

Creació d'un objecte nou.

Heu d'especificar més paràmetres per crear l'objecte.

Objecte	Paràmetres
Pàgines web	Nom, plantilla de pàgina, pàgina principal
Plantilles de pàgina	Nom, plantilla web
Plantilles web	Nom
Fragments de contingut	Nom i si el fragment serà HTML o text.
Actius nous (fitxers web)	Nom, pàgina principal i seleccioneu el fitxer que voleu carregar.

Suprimir i canviar el nom de les operacions

Des de la navegació de fitxers, pots utilitzar el menú contextual per reanomenar o eliminar components de Power Pages.