Partilhar via


Utilizar a extensão do Visual Studio Code

O Visual Studio Code é um editor de código de fonte leve, mas poderoso, que funciona no seu ambiente de trabalho e está disponível para Windows, macOS e Linux. É fornecido com suporte incorporado para JavaScript, TypeScript e Node.js e tem um ecossistema de extensões avançado para outras linguagens (tais como C++, C#, Java, Python, PHP e Go) e runtime (como .NET e Unity). Para obter mais informações, veja Introdução ao VS Code.

O Visual Studio Code permite-lhe alargar a sua capacidade através de extensões. As extensões do Visual Studio Code podem adicionar mais funcionalidades à experiência global. Com o lançamento desta caraterística, pode agora utilizar a extensão do Visual Studio Code para trabalhar com portais do Power Pages.

Extensão do Visual Studio Code para o Power Pages

O Power Platform Tools acrescenta a capacidade de configurar sites usando o Visual Studio Code e utilizar a linguagem IntelliSense incorporada da Liquid, permitindo ajudar na conclusão, assistência e sugestão de código ao personalizar a interface de sites usando o Visual Studio Code. Utilizando a extensão do Visual Studio Code, também pode configurar portais através da Microsoft Power Platform CLI.

Nota

  • Terá de assegurar que o node.js é transferido e instalado na mesma estação de trabalho que o Visual Studio Code para que as caraterísticas do Power Pages funcionem.
  • Certifique-se de que só o Power Platform Tools são instaladas e não ao mesmo tempo o Power Platform Tools e o Power Platform Tools [PRÉ-VISUALIZAÇÃO]. Para obter informações detalhadas, consulte problemas conhecidos.

Animação que explica como instalar e definir o Power Platform Tools.

Pré-requisitos

Antes de utilizar a extensão do Visual Studio Code para o Power Pages, tem de:

Instalar a extensão do Visual Studio Code

Depois de instalar o Visual Studio Code, tem de instalar a extensão para o plug-in do Power Platform Tools para o Visual Studio Code.

Para instalar a extensão do Visual Studio Code:

  1. Abra o Visual Studio Code.

  2. Selecione Extensões a partir do painel esquerdo.

    Extensão do Visual Studio Code.

  3. Selecione o Ícone de Definições na parte superior direita no painel de extensões.

  4. Procure e selecione Power Platform Tools.

    Selecione Power Platform Tools.

  5. Selecione Instalar.

  6. Verifique se a extensão é instalada com êxito a partir das mensagens de estado.

Transferir conteúdo de sites

Para se autenticar num ambiente do Microsoft Dataverse e transferir conteúdos de sites, consulte o tutorial Utilizar a Microsoft Power Platform CLI com o Power Pages — transferir conteúdo de sites.

Gorjeta

A Extensão do Power Platform Tools permite automaticamente a utilização de comandos da Microsoft Power Platform CLI a partir do Visual Studio Code através do Visual Studio Terminal Integrado.

Ícones de ficheiro

A extensão do Visual Studio Code para o Power Pages identifica e mostra automaticamente ícones para ficheiros e pastas dentro do conteúdo do site transferido.

Lista de ficheiros num modelo de iniciação com o tema do ícone de ficheiro específico de sites.

O Visual Studio Code utiliza o tema de ícone de ficheiro predefinido que não mostra ícones específicos do Power Pages. Para ver ícones de ficheiro específicos dos seus sites, terá de atualizar a instância do Visual Studio Code para utilizar o tema de ícone de ficheiro específico do Power Pages.

Para ativar um tema de ícone de ficheiro específico de portais:

  1. Abra o Visual Studio Code.

  2. Aceda a Ficheiro>Preferências>Tema>Tema do Ícone de Ficheiro

  3. Selecione o tema para Ícones de portais do PowerApps.

    Selecione o tema para Ícones de Portais do Power Apps.

Pré-visualização em direto

A extensão do Visual Studio Code permite uma opção de pré-visualização em direto para ver a página de conteúdo do Power Pages dentro do Visual Studio Code durante a experiência de desenvolvimento.

Para ver a pré-visualização, selecione Botão Pré-visualização. no canto superior direito quando tiver um ficheiro HTML aberto em modo de edição.

Pré-visualização da página.

O painel de pré-visualização abre no lado direito da página que está a ser editada.

Ecrã com uma lista de ficheiros, ficheiro aberto no editor do Visual Studio Code e uma pré-visualização no lado direito.

A funcionalidade de pré-visualização requer que os outros ficheiros também estejam abertos na mesma sessão do Visual Studio Code que constitui a marcação HTML para a pré-visualização a mostrar. Por exemplo, se apenas o ficheiro HTML for aberto sem a estrutura da pasta aberta utilizando o Visual Studio Code, verá a seguinte mensagem:

A executar o comando contribuído: 'microsoft-powerapps-portals.preview-show' falhou.

Quando este problema ocorrer, abra a pasta utilizando Ficheiro > Abrir a pasta e selecione a pasta de conteúdo do site transferido a abrir antes de tentar pré-visualizar de novo.

Preenchimento Automático

A capacidade de preenchimento automático na extensão do Visual Studio Code mostra o contexto atual a ser editado e os elementos de preenchimento automático relevantes através do IntelliSense.

Exemplo de preenchimento automático para o ID do modelo de página.

Etiquetas do Liquid

Ao personalizar conteúdo transferido utilizando o Visual Studio Code, pode agora utilizar as etiquetas Liquid do IntelliSense para o Power Pages.

Comece a escrever e uma lista de etiquetas Liquid aparecerá, após selecionada a etiqueta, esta será formatada corretamente e ficará pronta para mais entradas.

Fragmento com um exemplo de conclusão de etiqueta Liquid.

Objetos do Liquid

Pode ver as conclusão do código de objeto Liquid ao introduzir {{ }}. Com o cursor colocado entre os parênteses, selecione <CTRL + space> para apresentar uma lista de objetos Liquid que pode selecionar. Se o objeto tiver mais propriedades, pode introduzir um . e, em seguida, selecione <CTRL + space> novamente para ver propriedades específicas do objeto Liquid.

Introduzir um objeto Liquid.

Etiquetas de modelos

Pode ver sugestões de modelos Web do Power Pages ao colocar o cursor na instrução {include ' '} e selecionando <CTRL> - space. Ser-lhe-á apresentada uma lista de modelos Web existentes para seleção.

Etiquetas de modelo.

Criar, eliminar e mudar o nome de objetos do site

A partir do Visual Studio Code, pode criar, eliminar e mudar o nome dos seguintes componentes do site:

  • Páginas Web
  • Modelos de página
  • Modelos Web
  • Fragmentos de conteúdo
  • Novos recursos (ficheiros Web)

Criar operações

Pode utilizar as opções do menu de contexto para criar novos componentes de site, selecionar com o botão direito do rato um dos objetos suportados, escolher o Power Pages e selecionar o tipo de objeto do site que pretende criar.

Em alternativa, poderá utilizar o comando de paleta do Visual Studio Code selecionando Ctrl + Shift + P.

Criar um novo objeto.

Terá de especificar mais parâmetros para criar o objeto.

Object Parâmetros
Páginas Web Nome, modelo de página, página principal
Modelos de página Nome, modelo Web
Modelos Web Name
Fragmentos de conteúdo Nome, e se o fragmento será HTML ou texto.
Novos recursos (ficheiros Web) Nome, página principal e seleção de ficheiro a carregar.

Operações Mudar o nome e Eliminar

A partir da navegação do ficheiro, pode utilizar o menu de contexto para mudar o nome ou eliminar componentes do Power Pages.

Nota

É possível restaurar objetos eliminados a partir da reciclagem no ambiente de trabalho.

Limitações

As seguintes limitações aplicam-se atualmente ao Power Platform Tools para portais:

Consulte também

Suporte do Power Pages para a Microsoft Power Platform CLI (pré-visualização)