Usar a extensión de Visual Studio Code

Artigo
10/07/2023

Visual Studio Code é un editor de código fonte lixeiro pero potente que funciona no seu escritorio e está dispoñible para Windows, macOS e Linux. Vén con asistencia integrada para JavaScript, TypeScript e Node.js e ten un amplo ecosistema de extensións para outras linguaxes (como C++, C#, Java, Python, PHP e Go) e tempos de execución (como .NET e Unity). Para obter máis información, consulte Comezar a usar VS Code.

Visual Studio Code permítelle ampliar a súa capacidade mediante extensións. As extensións de Visual Studio Code poden engadir máis funcións á experiencia xeral. Co lanzamento desta función, agora pode usar a extensión de Visual Studio Code para traballar con Power Pages.

Extensión de Visual Studio Code para Power Pages

Power Platform Tools engade a capacidade de configurar sitios web mediante Visual Studio Code e utilizar a linguaxe Liquid incorporada IntelliSense que habilita a axuda para completar o código, asistencia e suxestións ao personalizar a interface dos sitios web mediante Visual Studio Code. Usando a extensión Visual Studio Code, tamén pode configurar portais a través de Microsoft Power Platform CLI.

Nota

Deberá asegurarse de que node.js se descargue e instale na mesma estación de traballo que Visual Studio Code para que as funcións de Power Pages funcionen.
Asegúrese de que só se instalan Power Platform Tools e non as Power Platform Tools e Power Platform Tools [VERSIÓN PRELIMINAR]. Consulte problemas coñecidos para obter máis información.

Animación que explica como instalar e configurar Power Platform Tools.

Requisitos previos

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

Descargar, instalar e configurar Visual Studio Code. Máis información: Descargar Visual Studio Code
Configure o seu ambiente e sistema para compatibilizar Power Pages CI/CD usando CLI. Máis información: Microsoft Power Platform CLI (versión preliminar)

Instalar a extensión Visual Studio Code

Despois de instalar Visual Studio Code, cómpre instalar a extensión para o complemento de Power Platform Tools para Visual Studio Code.

Para instalar a extensión de Visual Studio Code:

Abra Visual Studio Code.
Seleccione Extensións no panel esquerdo.
Seleccione a icona de Configuración desde a parte superior dereita no panel de extensións.
Busque e seleccione Power Platform Tools.
Seleccionar Instalar.
Verifique que a extensión estea instalada correctamente a partir das mensaxes de estado.

Descargar contido de sitios web

Para autenticarse nun ambiente de Microsoft Dataverse e para descargar contido de sitios web, consulte o titorial Usar Microsoft Power Platform CLI con Power Pages: descargar contido de sitios web.

Suxestión

A extensión de Power Platform Tools activa automaticamente o uso de comandos de Microsoft Power Platform CLI desde Visual Studio Code ata o Terminal integrado de Visual Studio.

Iconas de ficheiro

A extensión de Visual Studio Code para Power Pages identifica e amosa automaticamente iconas para ficheiros e cartafoles dentro do contido dos portais descargado.

Lista de ficheiros nun modelo de principiante con tema de icona de ficheiro específico para sitios web.

Visual Studio Code usa o tema da icona de ficheiro predefinido que non mostra iconas específicas de Power Pages. Para ver as iconas de ficheiro específicas dos seus sitios web, terá que actualizar a instancia de Visual Studio Code para usar o tema de iconas de ficheiro específicas de Power Pages.

Para activar un tema de iconas de ficheiros específicas de portais:

Abra Visual Studio Code.
Vaia a Ficheiro>Preferencias>Tema>Tema da icona de ficheiro
Seleccione o tema para iconas de portais de PowerApps.

Previsualización dinámica

A extensión de Visual Studio Code activa unha opción de versión preliminar en directo para ver a páxina de contido de Power Pages na interface de Visual Studio Code durante a experiencia de desenvolvemento.

Para ver a previsualización, seleccione Botón Previsualizar. desde a parte superior dereita cando teña un ficheiro HTML aberto en modo de edición.

Previsualización de páxina.

O panel de versión preliminar ábrese na parte dereita da páxina que se está editando.

Unha pantalla con lista de ficheiros, ficheiro aberto no editor de Visual Studio Code e unha vista previa á dereita.

A función de versión preliminar require que os outros ficheiros tamén estean abertos na mesma sesión de Visual Studio Code que compón o marcador HTML para que se mostre a versión preliminar. Por exemplo, se só se abre o ficheiro HTML sen que a estrutura de cartafoles se abra usando Visual Studio Code, verá a seguinte mensaxe.

Executando o comando contribuído: fallou

Cando se produce este problema, abra o cartafol usando Ficheiro > Abrir cartafol e seleccione o cartafol de contido do sitio web descargado que se vai abrir antes de volver previsualizar.

Enchemento automático

A capacidade de enchemento automático na extensión de Visual Studio Code mostra o contexto actual que se está a editar e os elementos de enchemento automático relevantes a través de IntelliSense.

Un exemplo de enchemento automático para o ID do modelo de páxina.

Etiquetas Liquid

Ao personalizar o contido descargado usando Visual Studio Code, agora pode usar IntelliSense para etiquetas Liquid de Power Pages.

Comece tecleando e aparecerá unha lista de etiquetas Liquid, unha vez que seleccione a etiqueta, terá o formato correcto e estará lista para máis entradas.

Fragmento cun exemplo de conclusión de etiqueta Liquid

Obxectos Liquid

Pode ver código de obxecto Liquid completo introducindo {{ }}. Co cursor situado entre os corchetes, seleccione <CTRL + space> para mostrar unha lista de obxectos Liquid que pode seleccionar. Se o obxecto ten máis propiedades, pode introducir un . e despois seleccionar <CTRL + space> de novo para ver as propiedades específicas do obxecto Liquid.

Introducir un obxecto Liquid.

Etiquetas do modelo

Pode ver suxestións de modelo web de Power Pages colocando o cursor na declaración {include ' '} e seleccionar <CTRL> - space. Aparecerá unha lista de modelos web existentes para que os seleccione.

Etiquetas de modelo.

Crear, eliminar e renomear obxectos de sitio web

Dende dentro de Visual Studio Code, pode crear, eliminar e renomear os seguintes compoñentes do sitio web:

Páxinas web
Modelos de páxina
Modelos web
Fragmentos de contido
Novos activos (ficheiros web)

Crear operacións

Pode usar as opcións do menú contextual para crear novos compoñentes do sitio web, seleccionar co botón dereito un dos obxectos admitidos, escoller Power Pages e seleccionar o tipo de obxecto do sitio web que quere crear.

Alternativamente, pode usar a paleta de comandos de Visual Studio Code seleccionando Ctrl + Shift + P.

Cree un novo obxecto.

Deberá especificar máis parámetros para crear o obxecto.

Obxecto	Parámetros
Páxinas web	Nome, modelo de páxina, páxina principal
Modelos de páxina	Nome, modelo web
Modelos web	Nome
Fragmentos de contido	Nome e se o fragmento será HTML ou texto.
Novos activos (ficheiros web)	Nome, páxina principal e seleccione o ficheiro para cargar.

Renomear e eliminar operacións

Desde a navegación de ficheiros, pode utilizar o menú contextual para renomear ou eliminar compoñentes de Power Pages.

Nota

Os obxectos eliminados pódense restaurar desde a papeleira do escritorio.

Limitacións

As seguintes limitacións aplícanse actualmente a Power Platform Tools para portais:

As funcións de Enchemento automático só admiten funcionalidades limitadas.
A versión preliminar en directo non admite temas personalizados nin obxectos Liquid.

Consulte tamén

Compatibilidade de Power Pages para Microsoft Power Platform CLI (versión preliminar)

Compartir por