Compartir a través de


Utilizar la extensión de Visual Studio Code

Visual Studio Code es un editor de código fuente ligero pero potente que se ejecuta en su escritorio y está disponible para Windows, macOS y Linux. Viene con soporte integrado para JavaScript, TypeScript y Node.js y tiene un rico ecosistema de extensiones para otros lenguajes (como C ++, C#, Java, Python, PHP y Go) y tiempos de ejecución (como .NET y Unity). Para obtener más información, consulte Introducción a VS Code.

Visual Studio Code le permite ampliar su capacidad a través de extensiones. Las extensiones de Visual Studio Code pueden agregar más características a la experiencia general. Con el lanzamiento de esta característica, ahora puede usar la extensión Visual Studio Code para trabajar con Power Pages.

Extensión de Visual Studio Code para Power Pages

Las Power Platform Tools agregan la capacidad de configurar sitios web usando Visual Studio Code y usar IntelliSense de el lenguaje Liquid incorporado habilitando ayuda para completar el código, asistencia y sugerencias mientras personaliza la interfaz de los portales usando Visual Studio Code. Con la extensión Visual Studio Code, también puede configurar portales a través de Microsoft Power Platform CLI.

Nota

  • Deberá asegurarse de que node.js se descargue e instale en la misma estación de trabajo que Visual Studio Code para que funcionen las características de Power Pages.
  • Asegúrese de que solo Power Platform Tools esté instalado y no Power Platform Tools y Power Platform Tools [VISTA PREVIA]. Para más información, vea Problemas conocidos.

Animación que explica cómo instalar y configurar las Power Platform Tools.

Requisitos previos

Antes de usar la extensión Visual Studio Code para Power Pages, debe:

Instalar la extensión Visual Studio Code

Después de instalar Visual Studio Code, necesita instalar la extensión para el complemento de Power Platform Tools para Visual Studio Code.

Para instalar la extensión Visual Studio Code:

  1. Abra Visual Studio Code.

  2. Seleccione Extensiones en el panel de la izquierda.

    Extensión de Visual Studio Code.

  3. Seleccione el icono Configuración desde la parte superior derecha del panel de extensiones.

  4. Busque y seleccione Power Platform Tools.

    Seleccione Power Platform Tools.

  5. Seleccionar Instalar.

  6. Verifique que la extensión se haya instalado correctamente según los mensajes de estado.

Descargar contenido de sitio web

Para autenticarse en un entorno de Microsoft Dataverse y para descargar el contenido del sitio web, consulte el tutorial Usar Microsoft Power Platform CLI con Power Pages: descarga de contenido de sitios web.

Propina

La extensión Power Platform Tools habilita automáticamente el uso de comandos de Microsoft Power Platform CLI en Visual Studio Code mediante el Terminal integrado de Visual Studio.

Iconos de archivo

La extensión Visual Studio Code para Power Pages identifica y muestra automáticamente iconos para archivos y carpetas dentro del contenido del sitio web descargado.

Lista de archivos en una plantilla de inicio con tema de icono de archivo específico de sitios web.

Visual Studio Code usa el tema de icono de archivo predeterminado que no muestra iconos específicos de Power Pages. Para ver los íconos de archivos específicos de sus sitios web, deberá actualizar la instancia de Visual Studio Code para usar el tema de íconos de archivos específicos de Power Pages.

Para habilitar un tema de icono de archivo específico de portales:

  1. Abra Visual Studio Code.

  2. Vaya a Archivo>Preferencias>Tema>Tema de icono de archivo

  3. Seleccione el tema para los iconos de portales de PowerApps.

    Seleccione el tema para los iconos de portales de Power Apps.

Vista previa en directo

La extensión Visual Studio Code habilita una opción de versión preliminar en directo para ver la página de contenido de Power Pages dentro de la interfaz de Visual Studio Code durante la experiencia de desarrollo.

Para ver la vista previa, seleccione Botón Vista previa. en la parte superior derecha cuando se abre un archivo HTML en modo de edición.

Vista previa de la página.

El panel de vista previa se abre en el lado derecho de la página que se está editando.

Una pantalla con lista de archivos, archivo abierto en el editor de Visual Studio Code y una vista previa en el lado derecho.

La función de vista previa requiere que los otros archivos también estén abiertos en la misma sesión de Visual Studio Code que conforman el marcado HTML para que se muestre la vista previa. Por ejemplo, si solo se abre el archivo HTML sin la estructura de carpetas abierta usando Visual Studio Code, verá el siguiente mensaje.

Error al ejecutar el comando aportado: 'microsoft-powerapps-portals.preview-show'.

Cuando ocurra este problema, abra la carpeta usando Archivo > Abrir carpeta y seleccione la carpeta de contenido del sitio web descargada para abrirla antes de intentar obtener una vista previa nuevamente.

Autocompletar

La capacidad de completar automáticamente en la extensión Visual Studio Code muestra el contexto actual que se está editando y los elementos de autocompletar relevantes a través de IntelliSense.

Un ejemplo de autocompletar para el Id. de plantilla de página.

Etiquetas de Liquid

Al personalizar el contenido descargado con Visual Studio Code, ahora puede usar IntelliSense para etiquetas Liquid de Power Pages.

Comience escribiendo y aparecerá una lista de etiquetas de Liquid, una vez que seleccione la etiqueta, tendrá el formato correcto y estará lista para más entradas.

Fragmento de código con un ejemplo de finalización de etiqueta de Liquid

Objetos de Liquid

Puede ver las finalizaciones de código de objetos Liquid ingresando {{ }}. Con el cursor colocado entre corchetes, seleccione <CTRL + space> para mostrar una lista de objetos de Liquid que puede seleccionar. Si el objeto tiene más propiedades, puede ingresar . y luego seleccionar <CTRL + space> nuevamente para ver las propiedades específicas del objeto Liquid.

Introducir un objeto Liquid.

Etiquetas de plantilla

Puede ver sugerencias de plantillas web de Power Pages colocando el cursor en la declaración {include ' '} y seleccionando <CTRL> - space. Aparecerá una lista de plantillas web existentes para que las seleccione.

Etiquetas de plantilla.

Crear, eliminar y cambiar el nombre de los objetos del sitio web

Desde Visual Studio Code, puede crear, eliminar y cambiar el nombre de los siguientes componentes del sitio web:

  • Páginas web
  • Plantillas de página
  • Plantillas web
  • Fragmentos de contenido
  • Nuevos activos (archivos web)

Crear operaciones

Puede usar las opciones del menú contextual para crear nuevos componentes del sitio web, seleccione con el botón derecho uno de los objetos admitidos, elija Power Pages y seleccione el tipo de objeto de sitio web que desea crear.

Como alternativa, puede utilizar la paleta de comandos de Visual Studio Code seleccionando Ctrl + Shift + P.

Crear un nuevo objeto.

Deberá especificar más parámetros para crear el objeto.

Objecto Parámetros
Páginas web Nombre, plantilla de página, página principal
Plantillas de página Nombre, plantilla web
Plantillas web Name
Fragmentos de contenido Nombre y si el fragmento será HTML o texto.
Nuevos activos (archivos web) Nombre, página principal y archivo seleccionado para cargar.

Operaciones de cambiar nombre y eliminación

Desde la navegación de archivos, puede usar el menú contextual para cambiar el nombre o eliminar componentes de Power Pages

Nota

Los objetos eliminados se pueden restaurar desde la papelera de reciclaje del escritorio.

Limitaciones

Las siguientes limitaciones se aplican actualmente a las Power Platform Tools para portales:

Consulte también

Compatibilidad de Power Pages con Microsoft Power Platform CLI (versión preliminar)