Uso de la extensión Visual Studio Code

Visual Studio Code es un editor de código fuente ligero y eficaz para Windows, macOS y Linux. Admite JavaScript, TypeScript y Node.js y tiene un amplio ecosistema de extensiones para otros lenguajes, como C++, C#, Java, Python, PHP y Go, y entornos de ejecución como .NET y Unity. Obtenga más información sobre Visual Studio Code en Introducción a VS Code.

Visual Studio Code permite ampliar la funcionalidad a través de extensions. Visual Studio Code extensiones pueden agregar más características a la experiencia general. Con la versión 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

El Power Platform Tools añade la capacidad de configurar sitios web con Visual Studio Code, y utiliza el lenguaje Liquid integrado IntelliSense, habilitando ayuda para la finalización del código, asistencia y sugerencias mientras se personaliza la interfaz de los sitios web mediante Visual Studio Code. Con la extensión Visual Studio Code, también puede configurar portales a través de la CLI Microsoft Power Platform.

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 hacer lo siguiente:

• Descargue, instale y configure Visual Studio Code. Más información: Download Visual Studio Code

• Configura tu entorno y sistema para compatibilidad CI/CD de Power Pages usando la línea de comandos. Más información: Microsoft Power Platform CLI (versión preliminar)

Instalación de la extensión Visual Studio Code

Después de instalar Visual Studio Code, debe instalar la extensión del complemento de herramientas de Power Platform 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.

   

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. Seleccione Instalar.

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

Acciones de Power Pages

Power Pages Acciones simplifican la administración del sitio y reducen la dependencia de los comandos de la CLI de Microsoft Power Platform. Power Pages Actions está disponible en el panel titulado Power Pages Actions en la barra lateral del Explorador de Visual Studio Code.

Dentro de este panel, los sitios se clasifican de la siguiente manera:

• Sitios activos: sitios que están actualmente disponibles y activos en el entorno seleccionado.
• Sitios inactivos: sitios que están presentes en el entorno, pero no activos actualmente.
• Otros sitios: sitios descargados localmente pero que aún no están asociados con el entorno seleccionado.

Cambiar entornos

Para cambiar entornos:

1. Seleccione el botón Change Environment en el panel Acciones de Power Pages.

   Cambiar el entorno de los sitios

2. Seleccione el entorno que desee en la lista que aparece.

Al seleccionar un entorno, la lista de sitios se actualiza automáticamente.

Acciones para sitios

Los diferentes tipos de sitios proporcionan acciones específicas del contexto a las que puede tener acceso haciendo clic con el botón derecho.

Acciones de sitios activos

Haga clic con el botón derecho en los sitios activos para obtener acceso a las siguientes acciones:

• Vista previa: borra la memoria caché y abre el sitio dentro de VS Code para una Vista previa inmediata.
• Cargar: carga los cambios locales en su entorno.
• Descargar: descarga el contenido del sitio en una carpeta local para editarlo sin conexión.
• Detalles del sitio: Muestra información detallada sobre el sitio.
• Mostrar en el explorador: navega al directorio local que contiene el código del sitio.
• Abrir en el estudio de diseño de Power Pages: abre el sitio en el estudio de diseño de Power Pages.
• Ejecutar filtrado de CodeQL: realice análisis de código estático en archivos HTML y JavaScript para identificar vulnerabilidades en el código base mediante CodeQL. Esta opción solo está disponible para los sitios que se descargan localmente, indicados por la etiqueta Current en la lista de sitios activos.
• Comparar con Local: abre una vista de comparación para identificar las diferencias entre el área de trabajo local y el entorno remoto. Consulte más detalles sobre la característica de comparación de configuración del sitio.

Acciones de sitios inactivos

Los sitios inactivos proporcionan estas acciones:

• Open Site Management: abre el sitio dentro de la aplicación de administración de Power Pages.
• Detalles del sitio: proporciona información detallada sobre el sitio seleccionado, como el identificador del sitio web, la dirección URL del sitio web, la versión del modelo de datos, etc.

Otras acciones de sitios

Los sitios almacenados localmente, pero que aún no están en su entorno, ofrecen las siguientes acciones:

• Cargar sitio: carga el sitio local en su entorno conectado. Después de cargar, el sitio aparece en la lista de Sitios Inactivos, donde puede activarlo desde la página de inicio de Power Pages.
• Mostrar en el explorador: navega al directorio local que contiene el código del sitio.

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 iconos de archivo predeterminado, que no muestra iconos específicos de Power Pages. Para ver iconos de archivo específicos de los sitios web, debe actualizar la instancia de Visual Studio Code para usar el tema de icono de archivo específico Power Pages.

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

1. Abra Visual Studio Code.

2. Vaya a ArchivoPreferenciasTemaTema de iconos de archivo.

3. Seleccione el tema para Iconos de portales de PowerApps.

   

Vista previa del sitio

La acción de vista previa usa la extensión Microsoft Edge DevTools para Visual Studio Code para proporcionar una vista previa del sitio en editor. Usando la función, se ejecutan DevTools de Microsoft Edge y una versión integrada del navegador Microsoft Edge con emulación de dispositivo directamente dentro de VS Code, lo que le ofrece casi todas las mismas funcionalidades de depuración e inspección que se encuentran en el DevTools de Microsoft Edge completo.

La vista previa siempre muestra los cambios que ha subido a su sitio, así que asegúrese de enviar las ediciones locales antes de abrirla. Cada vez que inicie la vista previa, la memoria caché del sitio se borrará automáticamente para garantizar que vea las actualizaciones más recientes.

Para abrir la vista previa, haga clic con el botón derecho en el sitio activo en Power Pages Actions y seleccione Preview. Esta acción abre el explorador Microsoft Edge incrustado que apunta al sitio elegido.

El panel de vista previa se abre en el lado derecho.

Comparación de la configuración del sitio

Use la opción Comparar con local para identificar las diferencias entre el área de trabajo local y la configuración del sitio activo en el entorno remoto. Esta característica le ayuda a detectar cambios no deseados, a solucionar problemas específicos del entorno y a mantener la coherencia antes de sincronizar las configuraciones del sitio.

Al seleccionar esta acción, se abre una sección Site Comparison en la Tools en la vista Acciones de Power Pages. En esta sección se muestran todos los archivos de tu espacio de trabajo local que difieren del entorno, resaltándolos.

• Agregado: nuevos archivos creados en el área de trabajo local que no existen en el entorno.
• Modificado: archivos en los que el código o los metadatos difieren entre las versiones locales y de entorno.
• Eliminado: archivos que se han quitado del área de trabajo local, pero que siguen existiendo en el entorno.

Para comparar una configuración de sitio activo con el área de trabajo local:

1. En la barra lateral del Explorador, expanda el panel Power Pages Actions.
2. En la lista Sitios activos o inactivos , haga clic con el botón derecho en el sitio que desea comparar.
3. Seleccione Comparar con Local.

Captura de pantalla que muestra la opción Comparar con local en la lista de sitios.

Para comparar una carpeta específica:

1. En la barra lateral del Explorador, seleccione una carpeta (como ) en el área de trabajo local.
2. Haga clic con el botón derecho y seleccione Power Pages>Comparar con el entorno.

Captura de pantalla que muestra la opción comparar en la carpeta del área de trabajo local.

Administrar los resultados de la comparación

Una vez que la pestaña Comparación de sitios está activa con cambios, puede hacer clic con el botón derecho en la lista de comparación para acceder a acciones adicionales:

• Open All Diffs: Abre el editor de diferencias de Visual Studio Code para cada archivo de la lista, permitiendo revisar todos los cambios simultáneamente.
• Actualizar comparación: vuelve a escanear el área de trabajo local y el entorno remoto para actualizar la lista con los cambios más recientes.
• Exportar como informe HTML: genera un documento HTML que se puede compartir, detallando todas las diferencias detectadas.
• Exportar como JSON: exporta los datos de comparación en formato JSON para flujos de trabajo automatizados o informes personalizados. Puede compartir este archivo exportado con miembros del equipo, que pueden importarlo en su propia vista haciendo clic con el botón derecho en la sección Comparación de sitios y seleccionando la opción Importar comparación .
• Descartar todos los cambios locales: revierte todas las ediciones locales para que coincidan con la versión que se encuentra actualmente en el entorno remoto.
• Quitar comparación: cierra la sesión de comparación actual y borra la pestaña de resultados.

Captura de pantalla en la que se muestran las opciones disponibles en la pestaña comparación de sitios

Autocompletar

La funcionalidad de autocompletado de la extensión de Visual Studio Code muestra el contexto actual que se está editando y los elementos pertinentes de autocompletado a través de IntelliSense.

Captura de pantalla con un ejemplo de autocompletar para el Id. de plantilla de página.

Etiquetas de Liquid

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

Comience a escribir para ver una lista de etiquetas Liquid. Seleccione una etiqueta para darle el formato correcto y continúe con su entrada.

Captura de pantalla de un 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 para mostrar una lista de objetos de Liquid que puede seleccionar. Si el objeto tiene más propiedades, puede ingresar . y luego seleccionar nuevamente para ver las propiedades específicas del objeto Liquid.

La captura de pantalla muestra la entrada de un objeto Liquid.

Etiquetas de plantilla

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

Captura de pantalla de etiquetas de plantilla.

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

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

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

Crear operaciones

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

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

Crear un nuevo objeto.

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

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.

Limitaciones

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

• Las características de Autocompletar solo admiten una funcionalidad limitada.

Información relacionada

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