Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
O Visual Studio Code é um editor de código-fonte leve e avançado para Windows, macOS e Linux. Ele tem suporte para JavaScript, TypeScript e Node.js e tem um ecossistema avançado de extensões para outras linguagens como C++, C#, Java, Python, PHP e Go e runtimes como .NET e Unity. Saiba mais sobre o Visual Studio Code em Introdução ao VS Code.
O Visual Studio Code permite estender sua capacidade por meio de extensões. As extensões do Visual Studio Code podem adicionar mais recursos à experiência geral. Com o lançamento desse recurso, agora você pode usar a extensão do Visual Studio Code para trabalhar com o Power Pages.
Extensão do Visual Studio Code para o Power Pages
O Power Platform Tools adiciona a capacidade de configurar sites usando o Visual Studio Code e usa a linguagem Liquid integrada IntelliSense, permitindo ajuda com preenchimento de código, assistência e dicas ao personalizar a interface de sites usando o Visual Studio Code. Usando a extensão do Visual Studio Code, você também pode configurar portais por meio do Microsoft Power Platform CLI.
Observação
- Você precisa garantir que node.js seja baixado e instalado na mesma estação de trabalho que o Visual Studio Code para que os recursos do Power Pages funcionem.
- Certifique-se de que somente Power Platform Tools estejam instaladas e não Power Platform Tools e Power Platform Tools [VERSÃO PRELIMINAR]. Consulte Problemas conhecidos para obter detalhes.
Pré-requisitos
Antes de usar a extensão do Visual Studio Code para o Power Pages, você deve:
Baixar e instalar e configurar o Visual Studio Code. Mais Informações: Baixar o Visual Studio Code
Configurar seu ambiente e sistema para o suporte a CI/CD do Power Pages usando a CLI. Mais informações: Microsoft Power Platform CLI (versão preliminar)
Instalar a extensão do Visual Studio Code
Depois de instalar o Visual Studio Code, você precisa instalar a extensão para o plug-in do Power Platform Tools para Visual Studio Code.
Para instalar a extensão Visual Studio Code:
Abra o Visual Studio Code.
Selecione Extensões no painel esquerdo.
Selecione o ícone Configurações no canto superior direito do painel de extensões.
Pesquise e selecione o Power Platform Tools.
Selecione Instalar.
Verifique se a extensão foi instalada com êxito pelas mensagens de status.
Dica
A extensão do Power Platform Tools permite automaticamente o uso de comandos do Microsoft Power Platform CLI de dentro do Visual Studio Code por meio do Terminal Integrado do Visual Studio.
Power Pages Ações
As ações do Power Pages simplificam o gerenciamento do site e reduzem a dependência dos comandos da Microsoft Power Platform CLI. As ações do Power Pages estão disponíveis no painel intitulado Ações do Power Pages na barra lateral do Explorer do Visual Studio Code.
Nesse painel, os sites são categorizados da seguinte maneira:
- Sites Ativos: sites que estão atualmente disponíveis e ativos no ambiente selecionado.
- Sites Inativos: sites que estão no ambiente, mas não estão ativos no momento.
- Outros Sites: sites baixados localmente, mas ainda não associados ao ambiente selecionado.
Alteração de ambientes
Para alternar ambientes:
Selecione o botão Alterar Ambiente no painel Ações do Power Pages.
Selecione o ambiente desejado da lista exibida.
Quando você seleciona um ambiente, a lista de sites é atualizada automaticamente.
Ações para sites
Diferentes tipos de sites fornecem ações específicas do contexto que você pode acessar clicando com o botão direito do mouse.
Ações de Sites Ativos
Clique com o botão direito do mouse em Sites Ativos para acessar as seguintes ações:
- Visualizar: limpa o cache e abre o site no VS Code para visualização imediata.
- Carregar: carrega as alterações locais de volta para o seu ambiente.
- Baixar: baixa o conteúdo do site para uma pasta local para edição offline.
- Detalhes do Site: Exibe informações detalhadas sobre o site.
- Revelar no Explorer: navega até o diretório local que contém o código do site.
- Abrir no Estúdio do Power Pages: abre o site no estúdio do Power Pages.
- Executar a triagem do CodeQL: execute a análise de código estático em arquivos HTML e JavaScript para identificar vulnerabilidades em sua base de código usando CodeQL. Essa opção está disponível apenas para sites baixados localmente, indicados pela marca Atual na lista de sites ativos.
Ações de Sites Inativos
Sites inativos fornecem estas ações:
- Abrir Gerenciamento de Site: abre o site dentro do aplicativo Power Pages management.
- Detalhes do Site: fornece informações detalhadas sobre o site selecionado, como ID do site, URL do site, versão do modelo de dados e muito mais.
Ações de Outros Sites
Sites armazenados localmente, mas que ainda não estão em seu ambiente, oferecem as seguintes ações:
- Carregar Site: carrega o site local para seu ambiente conectado. Após o carregamento, o site aparece na lista Sites Inativos, onde você pode ativá-lo da página inicial do Power Pages.
- Revelar no Explorer: navega até o diretório local que contém o código do site.
Ícones de arquivo
A extensão do Visual Studio Code para o Power Pages identifica e mostra automaticamente ícones para arquivos e pastas dentro do conteúdo do site baixado.
O Visual Studio Code usa o tema de ícone de arquivo padrão que não mostra ícones específicos do Power Pages. Para exibir ícones de arquivo específicos de seus site, atualize a instância do Visual Studio Code para usar o tema de ícone de arquivo específico do Power Pages.
Para habilitar um tema de ícone de arquivo específico de portais:
Abra o Visual Studio Code.
Acesse Arquivo>Preferências>Tema>Tema de Ícone de Arquivo
Selecione o tema para Ícones de portais do PowerApps.
Visualização de site
A ação de visualização usa a Microsoft Edge extensão DevTools para Visual Studio Code para fornecer uma visualização do site no editor. Esse recurso executa DevTools do Microsoft Edge e um navegador incorporado do Microsoft Edge com emulação de dispositivo dentro do VS Code, oferecendo a você quase todos os mesmos recursos de depuração e inspeção encontrados no DevTools do Microsoft Edge completo.
A visualização sempre mostra as alterações que você carregou em seu site, portanto, certifique-se de enviar por push todas as edições locais antes de abri-lo. Cada vez que você inicia a visualização, o cache do site é limpo automaticamente para garantir que você exiba as atualizações mais recentes.
Para abrir a versão preliminar, clique com o botão direito do mouse no site ativo em Ações do Power Pages e selecione Visualizar. Essa ação abre o navegador do Microsoft Edge incorporado apontando para o site escolhido.
O painel de visualização é aberto no lado direito.
Preenchimento automático
O recurso de preenchimento automático na extensão do Visual Studio Code mostra o contexto atual que está sendo editado e os elementos de preenchimento automático relevantes por meio do IntelliSense.
Marcas do Liquid
Ao personalizar o conteúdo baixado usando o Visual Studio Code, agora você pode usar o IntelliSense para marcas Liquid do Power Pages.
Comece a digitar para ver uma lista de tags do Liquid. Selecione uma tag para formatá-la corretamente e continuar com sua entrada.
Objetos Liquid
Você pode ver preenchimentos de código de objeto Liquid inserindo {{ }}. Com o cursor posicionado entre os colchetes, selecione <CTRL + space> para exibir uma lista de objetos Liquid que você pode selecionar. Se o objeto tiver mais propriedades, você poderá inserir um . e, em seguida, selecionar <CTRL + space> novamente para ver as propriedades específicas do objeto Liquid.
Marcas de modelo
Você pode ver sugestões de modelo da Web do Power Pages colocando o cursor na instrução {include ' '} e selecionando <CTRL> - space. Uma lista de modelos da Web existentes é exibida para você selecionar.
Criar, excluir e renomear objetos do site
No Visual Studio Code, você pode criar, excluir e renomear os seguintes componentes do site:
- Páginas da Web
- Modelos de página
- Modelos da Web
- Trechos de conteúdo
- Novos ativos (arquivos da Web)
Criar operações
Você pode usar as opções do menu de contexto para criar novos componentes do site. Clique com o botão direito do mouse em um dos objetos com suporte, escolha Power Pages e selecione o tipo de objeto de site que deseja criar.
Como alternativa, é possível usar a paleta de comandos do Visual Studio Code selecionando Ctrl + Shift + P.
Você precisa especificar mais parâmetros para criar o objeto.
| Object | Parâmetros |
|---|---|
| Páginas da Web | Nome, modelo de página, página pai |
| Modelos de página | Nome, modelo da Web |
| Modelos da Web | Name |
| Trechos de conteúdo | Nome, e se o trecho será em HTML ou texto. |
| Novos ativos (arquivos da Web) | Nome, página pai e selecione o arquivo a ser carregado. |
Renomear e excluir operações
Na navegação de arquivos, você pode usar o menu de contexto para renomear ou excluir componentes do Power Pages.
Observação
Os objetos excluídos podem ser restaurados da lixeira na área de trabalho.
Limitações
Atualmente, as seguintes limitações se aplicam ao Power Platform Tools para portais:
- Os recursos do Preenchimento automático dão suporte apenas a funcionalidades limitadas.
Informações relacionadas
Suporte do Power Pages para o Microsoft Power Platform CLI (versão preliminar)