Comparteix a través de

Utilitzar l'extensió del Visual Studio Code

  • Article

Visual Studio Code és un editor de codi font lleuger i potent per a Windows, macOS i Linux. Admet JavaScript, TypeScript i Node.js i té un ric ecosistema d'extensions per a altres llenguatges com C++, C#, Java, Python, PHP i Go, i temps d'execució com .NET i Unity. Obteniu més informació sobre el Visual Studio codi a Introducció al VS Code.

Visual Studio Code us permet ampliar la vostra capacitat amb extensions. Les extensions de Visual Studio Code poden afegir més característiques a l'experiència general. Amb la publicació d'aquesta característica, ara podeu utilitzar l'extensió de Visual Studio Code per treballar amb Power Pages.

Extensió de Visual Studio Code per a Power Pages

Les Power Platform Tools afegeixen la capacitat de configurar llocs web mitjançant el Visual Studio Code i utilitzen el llenguatge de Liquid integrat IntelliSense que proporciona ajuda amb la finalització del codi, assistència i consells quan es personalitzen els llocs web utilitzant el Visual Studio Code. Utilitzant l'extensió del Visual Studio Code, també podeu configurar portals a través de Microsoft Power Platform CLI.

Nota

  • Heu d'assegurar-vos que node.js es descarregui i s'instal·li a la mateixa estació de treball que Visual Studio el codi perquè funcionin les Power Pages funcions.
  • 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ó del Visual Studio Code per a Power Pages, heu de:

Instal·lar l'extensió del Visual Studio Code

Després d'instal·lar Visual Studio Code, heu d'instal·lar l'extensió del complement de Power Platform Tools per al Visual Studio Code.

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

  1. Obriu el Visual Studio Code.

  2. Seleccioneu Extensions a la subfinestra esquerra.

    Extensió de Visual Studio Code.

  3. Seleccioneu la icona Configuració a la part superior dreta de la subfinestra d'extensions.

  4. Cerqueu i seleccioneu Power Platform Tools.

    Seleccioneu Power Platform Tools.

  5. Seleccioneu Instal·la.

  6. Comproveu que l'extensió s'hagi instal·lat correctament des dels missatges d'estat.

Baixar el contingut de lloc web

Per autenticar-vos amb un entorn del Microsoft Dataverse i per a baixar el contingut del lloc web, consulteu el tutorial Utilitzar la CLI del Microsoft Power Platform amb Power Pages: baixar el contingut del lloc web.

Propina

L'extensió del Power Platform Tools habilita automàticament l'ús d'ordres del Microsoft Power Platform CLI dins del Visual Studio Code mitjançant el Terminal integrat del Visual Studio.

Icones de fitxer

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

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

El Visual Studio Code utilitza el tema d'icones de fitxer per defecte, que no mostra icones específiques de Power Pages. Per veure les icones de fitxer específiques dels vostres llocs web, heu d'actualitzar la instància de Visual Studio codi per utilitzar el tema específic de Power Pages la icona de fitxer.

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

  1. Obriu el Visual Studio Code.

  2. Aneu a Fitxer>Preferències>Tema>Tema d'icones de fitxer

  3. Seleccioneu el tema per a les icones dels portals del PowerApps.

    La captura de pantalla mostra la selecció del tema per Power Apps a les icones dels portals.

Visualització prèvia en directe

L'extensió del Visual Studio Code permet una opció de versió preliminar en directe per veure la pàgina de contingut de Power Pages dins de la interfície del Visual Studio Code durant l'experiència de desenvolupament.

Per veure la vista prèvia, seleccioneu Captura de pantalla del botó de vista prèvia. des de la part superior dreta quan tingueu un fitxer HTML obert en mode d'edició.

Captura de pantalla de la vista prèvia de la pàgina.

La subfinestra de versió preliminar s'obre a la part dreta de la pàgina que s'està editant.

Captura de pantalla que mostra la llista de fitxers, el fitxer obert a Visual Studio l'editor de codi i una vista prèvia a la part dreta.

La característica de versió preliminar requereix que els altres fitxers també estiguin oberts a la mateixa sessió del Visual Studio Code que componen el marcatge HTML perquè es mostri la versió preliminar. Per exemple, si només s'obre el fitxer HTML sense que l'estructura de carpetes s'obri amb Visual Studio Codi, apareixerà el missatge següent.

La captura de pantalla mostra l'execució de l'ordre aportada:

Quan es produeixi aquest problema, obriu la carpeta mitjançant Fitxer > Obre la carpeta i seleccioneu la carpeta de contingut del lloc web baixada per obrir-la abans de tornar a provar la versió preliminar.

Emplenament automàtic

La funcionalitat d'emplenament automàtic de l'extensió del Visual Studio Code mostra el context actual que s'està editant i els elements d'emplenament automàtic 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

En personalitzar el contingut baixat amb el Visual Studio Code, ara podeu utilitzar IntelliSense per a etiquetes de Liquid de Power Pages.

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 <CTRL + space> 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 <CTRL + space> per veure propietats específiques de l'objecte de Liquid.

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

Etiquetes de plantilla

Podeu veure els suggeriments de les plantilles web de Power Pages, col·loqueu el cursor a la declaració {include ' '} i seleccioneu <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 del Visual Studio Code, podeu crear, suprimir i canviar el nom dels components de lloc web següents:

  • 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. Feu clic amb el botó dret en un dels objectes admesos, trieu Power Pages i seleccioneu el tipus d'objecte del lloc web que voleu crear.

O bé useu la paleta d'ordres 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ó del fitxer, podeu utilitzar el menú contextual per canviar el nom o suprimir components de Power Pages.

Nota

Els objectes suprimits es poden restaurar des de la paperera de supressió de l'escriptori.

Limitacions

Actualment, les limitacions següents s'apliquen al Power Platform Tools per als portals:

Power Pages Compatibilitat amb Microsoft Power Platform CLI (versió preliminar)