Usare l'estensione Visual Studio Code

Visual Studio Code è un editor di codice sorgente leggero e potente per Windows, macOS e Linux. Supporta JavaScript, TypeScript e Node.js e offre un ricco ecosistema di estensioni per altri linguaggi come C++, C#, Java, Python, PHP e Go e runtime come .NET e Unity. Altre informazioni sulle Visual Studio Code in Introduzione a VS Code.

Visual Studio Code consente di estendere la funzionalità tramite extensions. Visual Studio Code estensioni possono aggiungere altre funzionalità all'esperienza complessiva. Con il rilascio di questa funzionalità, è ora possibile usare l'estensione Visual Studio Code per lavorare con Power Pages.

estensione Visual Studio Code per Power Pages

L'Power Platform Tools aggiunge la funzionalità per configurare i siti Web usando Visual Studio Code e usare il linguaggio Liquid predefinito IntelliSense consentendo assistenza con il completamento del codice, assistenza e suggerimenti durante la personalizzazione dell'interfaccia dei siti Web usando Visual Studio Code. Usando l'estensione Visual Studio Code, è anche possibile configurare i portali tramite l'interfaccia della riga di comando di Microsoft Power Platform.

Animazione che spiega come installare e impostare Power Platform Tools.

Prerequisiti

Prima di usare l'estensione Visual Studio Code per Power Pages, è necessario:

• Scaricare, installare e configurare Visual Studio Code. Altre informazioni: Download Visual Studio Code

• Configurare l'ambiente e il sistema per il supporto CI/CD di Power Pages utilizzando l'interfaccia della riga di comando. Altre informazioni: Microsoft Power Platform cli (anteprima)

Installare l'estensione Visual Studio Code

Dopo aver installato Visual Studio Code, è necessario installare l'estensione per il plug-in degli strumenti di Power Platform per Visual Studio Code.

Per installare l'estensione Visual Studio Code:

1. Apri Visual Studio Code.

2. Seleziona Estensioni nel riquadro sinistro.

   

3. Seleziona l'icona Impostazioni in alto a destra nel riquadro delle estensioni.

4. Cerca e seleziona Power Platform Tools.

   Seleziona Power Platform Tools.

5. Seleziona Installa.

6. Verifica che l'estensione sia installata correttamente esaminando i messaggi di stato.

Azioni Power Pages

Power Pages Actions semplifica la gestione del sito e riduce la dipendenza dai comandi dell'interfaccia della riga di comando Microsoft Power Platform. Power Pages Actions è disponibile nel riquadro intitolato Power Pages Actions nella barra laterale di Explorer di Visual Studio Code.

All'interno di questo riquadro, i siti sono classificati come segue:

• Siti attivi: siti attualmente disponibili e attivi nell'ambiente selezionato.
• Siti inattivi: siti presenti nell'ambiente ma non attualmente attivi.
• Altri siti: siti scaricati localmente ma non ancora associati all'ambiente selezionato.

Cambiare ambienti

Per cambiare ambienti:

1. Selezionare il pulsante Change Environment nel riquadro Azioni Power Pages.

   Modificare l'ambiente per i siti

2. Seleziona l'ambiente desiderato nell'elenco visualizzato.

Quando selezioni un ambiente, l'elenco dei siti si aggiorna automaticamente.

Azioni per i siti

Diversi tipi di siti forniscono azioni specifiche del contesto a cui è possibile accedere facendo clic con il pulsante destro del mouse.

Azioni di Siti attivi

Fai clic con il pulsante destro del mouse su Siti attivi per accedere alle seguenti azioni:

• Anteprima: cancella la cache e apre il sito all'interno di VS Code per un'anteprima immediata.
• Carica: carica le modifiche locali nell'ambiente.
• Download: scarica il contenuto del sito in una cartella locale per la modifica offline.
• Dettagli sito: mostra informazioni dettagliate sul sito.
• Mostra in Explorer: passa alla directory locale contenente il codice del sito.
• Open in Power Pages Design Studio: apre il sito in Power Pages Design Studio.
• Eseguire lo screening codeQL: eseguire l'analisi statica del codice sui file HTML e JavaScript per identificare le vulnerabilità nella codebase usando CodeQL. Questa opzione è disponibile solo per i siti scaricati localmente, indicati dal tag Current nell'elenco dei siti attivi.
• Confronto con Locale: apre una visualizzazione di confronto per identificare le differenze tra l'area di lavoro locale e l'ambiente remoto. Vedere altri dettagli sulla funzionalità di configurazione del sito di confronto.

Azioni Siti inattivi

Siti inattivi fornisce queste azioni:

• Open Site Management: apre il sito all'interno dell'applicazione di gestione Power Pages.
• Dettagli sito: fornisce informazioni dettagliate sul sito selezionato, ad esempio l'ID sito Web, l'URL del sito Web, la versione del modello di dati e altro ancora.

Altre Azioni sito

I siti archiviati in locale ma non ancora nel tuo ambiente offrono le azioni seguenti:

• Carica sito: carica il sito locale nell'ambiente connesso. Dopo il caricamento, il sito viene visualizzato nell'elenco Siti inattivi, in cui è possibile attivarlo da Power Pages home.
• Mostra in Explorer: passa alla directory locale contenente il codice del sito.

Icone di file

L'estensione Visual Studio Code per Power Pages identifica automaticamente e mostra le icone per i file e le cartelle all'interno del contenuto del sito Web scaricato.

Elenco di file in un modello di avvio con tema dell'icona di file specifico del sito Web.

Visual Studio Code usa il tema icone dei file predefinito che non mostra icone specifiche di Power Pages. Per visualizzare le icone di file specifiche per i siti Web, è necessario aggiornare l'istanza di Visual Studio Code per usare il tema dell'icona di file specifico Power Pages.

Per abilitare un tema di icone file specifico per i portali:

1. Apri Visual Studio Code.

2. Vai a FilePreferenzeTemaTema icona file.

3. Seleziona il tema per le icone dei portali PowerApps.

   

Anteprima del sito

L'azione di anteprima usa l'estensione Microsoft Edge DevTools per Visual Studio Code per fornire un'anteprima del sito nell'editor. Questa funzione esegue Microsoft Edge DevTools e un browser Microsoft Edge incorporato con emulazione del dispositivo direttamente all'interno di VS Code, offrendo quasi tutte le stesse funzionalità di debug e ispezione che si trovano in Microsoft Edge DevTools completo.

L'anteprima mostra sempre le modifiche che hai caricato nel tuo sito, quindi assicurati di eseguire il push di eventuali modifiche locali prima di aprirlo. Ogni volta che avvii l'anteprima, la cache del sito si svuota automaticamente per consentirti di visualizzare gli aggiornamenti più recenti.

Per aprire l'anteprima, fare clic con il pulsante destro del mouse sul sito attivo in Power Pages Actions e selezionare Preview. Questa azione apre il browser Microsoft Edge incorporato che punta al sito scelto.

Il riquadro di anteprima si apre sul lato destro.

Confrontare la configurazione del sito

Usare l'opzione Confronta con locale per identificare le differenze tra l'area di lavoro locale e la configurazione del sito attivo nell'ambiente remoto. Questa funzionalità consente di rilevare modifiche impreviste, risolvere i problemi specifici dell'ambiente e mantenere la coerenza prima di sincronizzare le configurazioni del sito.

Quando si seleziona questa azione, viene visualizzata una sezione Confronto tra siti nella sezione Tools nella visualizzazione Azioni Power Pages. In questa sezione vengono visualizzati tutti i file nell'area di lavoro locale che differiscono dall'ambiente, evidenziando:

• Aggiunti; nuovi file creati nell'area di lavoro locale che non esistono nell'ambiente.
• Modificato: file in cui il codice o i metadati differiscono tra le versioni locali e di ambiente.
• Eliminato: file rimossi dall'area di lavoro locale ma ancora presenti nell'ambiente.

Per confrontare una configurazione del sito live con l'area di lavoro locale:

1. Nella barra laterale di Explorer espandere il riquadro Power Pages Actions.
2. Nell'elenco Siti attivi/inattivi fare clic con il pulsante destro del mouse sul sito da confrontare.
3. Selezionare Confronta con locale.

Screenshot che mostra l'opzione Confronta con l'opzione locale nell'elenco dei siti.

Per confrontare una cartella specifica:

1. Nella barra laterale di Explorer selezionare una cartella ( ad esempio ) dall'area di lavoro locale.
2. Fare clic con il pulsante destro del mouse e selezionare Power Pages>Confronta con Ambiente.

Screenshot che mostra l'opzione di confronto nella cartella dell'area di lavoro locale.

Gestire i risultati del confronto

Quando la scheda Confronto siti è attiva con le modifiche, è possibile fare clic con il pulsante destro del mouse sull'elenco di confronto per accedere ad altre azioni:

• Apri tutti i diff: Apre l'editor Diff di Visual Studio Code per ogni file nell'elenco per esaminare tutte le modifiche contemporaneamente.
• Confronto aggiornamenti: analizza nuovamente l'area di lavoro locale e l'ambiente remoto per aggiornare l'elenco con le modifiche più recenti.
• Esporta come report HTML: genera un documento HTML condivisibile che illustra in dettaglio tutte le differenze rilevate.
• Esporta come JSON: esporta i dati di confronto in formato JSON per flussi di lavoro automatizzati o report personalizzati. È possibile condividere questo file esportato con i membri del team, che possono importarlo nella propria visualizzazione facendo clic con il pulsante destro del mouse sulla sezione Confronto siti e selezionando l'opzione Importa confronto .
• Ignora tutte le modifiche locali: ripristina tutte le modifiche locali in modo che corrispondano alla versione attualmente presente nell'ambiente remoto.
• Rimuovi confronto: chiude la sessione di confronto corrente e cancella la scheda dei risultati.

Screenshot che mostra le opzioni disponibili nella scheda confronto siti

Completamento automatico

La funzionalità di completamento automatico nell'estensione Visual Studio Code mostra il contesto corrente da modificare e gli elementi di completamento automatico pertinenti tramite IntelliSense.

Screenshot con un esempio di completamento automatico per l'ID del modello di pagina.

Tag Liquid

Quando si personalizza il contenuto scaricato con Visual Studio Code, è ora possibile usare IntelliSense per i tag Power Pages Liquid.

Inizia a digitare per visualizzare un elenco di tag Liquid. Seleziona un tag per formattarlo correttamente e continuare con l'input.

Screenshot di un frammento con un esempio di tag Liquid.

Oggetti Liquid

Puoi vedere i completamenti di codice dell'oggetto Liquid inserendo . Con il cursore posizionato tra le parentesi, seleziona per visualizzare un elenco di oggetti Liquid che puoi selezionare. Se l'oggetto ha più proprietà, puoi inserire un . e poi selezionare di nuovo per vedere le proprietà specifiche dell'oggetto Liquid.

Screenshot che mostra l'immissione di un oggetto Liquid.

Tag di modello

È possibile visualizzare i suggerimenti del modello Web di Power Pages posizionando il cursore nell'istruzione {include ' '} e selezionando <CTRL> - space. Viene visualizzato un elenco di modelli Web esistenti che puoi selezionare.

Screenshot di tag dei modelli.

Crea, elimina e rinomina gli oggetti del sito Web

Dall'interno di Visual Studio Code è possibile creare, eliminare e rinominare i componenti del sito Web seguenti:

• Pagine Web
• Modelli di pagina
• Modelli Web
• Frammenti di contenuto
• Nuovi cespiti (file Web)

Creare operazioni

Puoi utilizzare le opzioni del menu contestuale per creare nuovi componenti del sito Web. Fare clic con il pulsante destro del mouse su uno degli oggetti supportati, scegliere Power Pages e selezionare il tipo di oggetto del sito Web da creare.

In alternativa, è possibile usare il riquadro comandi Visual Studio Code selezionando Ctrl + Shift + P.

Creazione un nuovo oggetto.

Per creare l'oggetto, è necessario specificare altri parametri.

Rinomina ed elimina operazioni

Dal menu di spostamento file è possibile usare il menu di scelta rapida per rinominare o eliminare i componenti Power Pages.

Limiti

Le seguenti limitazioni si applicano attualmente a Power Platform Tools per i portali:

• Le funzionalità Completamento automatico supportano solo funzionalità limitate.

Informazioni correlate

Supporto di Power Pages per Microsoft Power Platform CLI (anteprima)