Partager via

Utiliser l’extension Visual Studio Code

Visual Studio Code est un éditeur de code source léger et puissant pour Windows, macOS et Linux. Il prend en charge JavaScript, TypeScript et Node.js et dispose d’un riche écosystème d’extensions pour d’autres langages tels que C++, C#, Java, Python, PHP et Go, et de runtimes tels que .NET et Unity. Pour en savoir plus sur Visual Studio Code, consultez Démarrer avec VS Code.

Visual Studio Code vous permet d’étendre votre capacité grâce aux extensions. Les extensions Visual Studio Code peuvent ajouter plus de fonctionnalités à l’expérience globale. Avec la sortie de cette fonctionnalité, vous pouvez désormais utiliser l’extension Visual Studio Code pour travailler avec Power Pages.

Extension Visual Studio Code pour Power Pages

Power Platform Tools ajoute la possibilité de configurer des sites web à l’aide de Visual Studio Code et d’utiliser le langage Liquid intégré IntelliSense permettant l’aide à la complétion du code, l’assistance et les conseils au moment de la personnalisation de l’interface des sites web à l’aide de Visual Studio Code. En utilisant l’extension Visual Studio Code, vous pouvez également configurer des portails via Microsoft Power Platform CLI.

Note

  • Vous devez vous assurer que node.js est téléchargé et installé sur la même station de travail que Visual Studio Code pour que les fonctionnalités Power Pages puissent fonctionner.
  • Assurez-vous que seul Power Platform Tools est installé, et non Power Platform Tools et Power Platform Tools [VERSION PRÉLIMINAIRE]. Consultez Problèmes connus pour obtenir plus de détails.

Animation qui explique comment installer et régler Power Platform Tools.

Conditions préalables

Avant d’utiliser l’extension Visual Studio Code pour Power Pages, vous devez :

Installer l’extension Visual Studio Code

Après avoir installé Visual Studio Code, vous devez installer l’extension pour le plug-in Power Platform Tools pour Visual Studio Code.

Pour installer l’extension Visual Studio Code :

  1. Ouvrez Visual Studio Code.

  2. Sélectionnez Extensions depuis le volet gauche.

    Extension de Visual Studio Code.

  3. Sélectionnez l’icône Paramètres en haut à droite dans le volet des extensions.

  4. Recherchez et sélectionnez Power Platform Tools.

    Sélectionnez Power Platform Tools.

  5. Cliquez sur Installer.

  6. Vérifiez que l’extension est installée avec succès à partir des messages de Statut.

Astuce

L’extension Power Platform Tools active automatiquement l’utilisation de commandes Microsoft Power Platform CLI à partir de Visual Studio Code via le Terminal intégré Visual Studio.

Power Pages actions

Les actions Power Pages simplifient la gestion du site et réduisent la dépendance sur les commandes Microsoft Power Platform CLI. Les actions Power Pages sont disponibles dans le volet intitulé Actions Power Pages dans la barre latérale de l’explorateur de Visual Studio Code.

Dans ce volet, les sites sont classés comme suit :

  • Sites actifs : sites actuellement disponibles et actifs dans l’environnement sélectionné.
  • Sites inactifs : sites présents dans l’environnement mais pas actuellement actifs.
  • Autres sites : sites téléchargés localement mais pas encore associés à l’environnement sélectionné.

Changement d’environnements

Pour changer d’environnements :

  1. Sélectionnez le bouton Changer d’environnement dans le volet Actions Power Pages.

    Modifier l’environnement pour les sites

  2. Sélectionnez l’environnement que vous souhaitez dans la liste affichée.

Lorsque vous sélectionnez un environnement, la liste des sites est mise à jour automatiquement.

Actions pour les sites

Différents types de sites proposent des actions spécifiques au contexte auxquelles vous pouvez accéder en cliquant avec le bouton droit.

Actions des sites actifs

Cliquez avec le bouton droit de la souris sur Sites actifs pour accéder aux actions suivantes :

  • Aperçu : efface le cache et ouvre le site dans VS Code pour un aperçu immédiat.
  • Charger : charge les modifications locales dans votre environnement.
  • Télécharger : télécharge le contenu du site dans un dossier local pour le modifier hors ligne.
  • Détails du site : affiche des informations détaillées sur le site.
  • Afficher dans l’explorateur : accède au répertoire local contenant le code du site.
  • Ouvrir dans le studio Power Pages : ouvre le site dans le studio Power Pages.

Actions des sites inactifs

Les sites inactifs proposent les actions suivantes :

  • Ouvrir la gestion du site : ouvre le site dans l’application Power Pages Management.
  • Détails du site : fournit des informations détaillées sur le site sélectionné, comme l’ID du site web, l’URL du site web, la version du modèle de données, etc.

Autres actions sur les sites

Les sites stockés localement mais pas encore dans votre environnement proposent les actions suivantes :

  • Charger le site : charge le site local dans votre environnement connecté. Une fois chargé, le site apparaît dans la liste des sites inactifs, où vous pouvez l’activer depuis la page d’accueil Power Pages.
  • Afficher dans l’explorateur : accède au répertoire local contenant le code du site.

Icônes de fichier

L’extension Visual Studio Code pour Power Pages identifie et affiche automatiquement les icônes des fichiers et dossiers dans le contenu téléchargé du site web.

Liste de fichiers dans un modèle de démarrage avec un thème d’icône de fichier spécifique au site web.

Visual Studio Code utilise le thème d’icône de fichier par défaut qui n’affiche pas les icônes spécifiques à Power Pages. Pour afficher les icônes de fichier spécifiques à vos sites web, vous devrez mettre à jour l’instance Visual Studio Code pour utiliser le thème d’icône de fichier spécifique à Power Pages.

Pour activer un thème d’icône de fichier spécifique aux portails :

  1. Ouvrez Visual Studio Code.

  2. Allez dans Fichier>Préférences>Thème>Thème d’icône de fichier

  3. Sélectionnez le thème pour les icônes des portails PowerApps.

    La capture d’écran montre la sélection du thème pour les icônes des portails Power Apps.

Aperçu du site

L’action Aperçu utilise l’extension Microsoft Edge DevTools pour Visual Studio Code pour fournir un aperçu du site dans l’éditeur. Cette fonctionnalité exécute Microsoft Edge DevTools et un navigateur Microsoft Edge intégré avec émulation d’appareil directement dans VS Code, ce qui vous fournit presque toutes les mêmes fonctionnalités de débogage et d’inspection que celles disponibles dans la version complète de Microsoft Edge DevTools.

L’aperçu affiche toujours les modifications que vous avez téléchargées sur votre site, alors assurez-vous d’envoyer toutes les modifications locales avant de l’ouvrir. Chaque fois que vous lancez l’aperçu, le cache du site s’efface automatiquement pour vous permettre d’afficher les mises à jour les plus récentes.

Pour ouvrir l’aperçu, cliquez avec le bouton droit sur votre site actif sous Actions Power Pages, puis sélectionnez Aperçu. Cette action ouvre le navigateur Microsoft Edge incorporé qui pointe vers le site que vous avez choisi.

Capture d’écran de l’action Aperçu du site Power Pages.

Le volet d’aperçu s’ouvre sur le côté droit.

Capture d’écran montrant la liste de fichiers, le fichier ouvert dans l’éditeur Visual Studio Code et un aperçu sur le côté droit.

Autocomplétion

La capacité de saisie semi-automatique de l’extension Visual Studio Code affiche le contexte actuel en cours de modification et les éléments de saisie semi-automatique pertinents via IntelliSense.

Capture d’écran avec un exemple de saisie semi-automatique pour l’ID du modèle de page.

Balises Liquid

Au moment de la personnalisation du contenu téléchargé à l’aide de Visual Studio Code, vous pouvez désormais utiliser IntelliSense pour les balises Liquid de Power Pages.

Commencez à taper pour voir une liste de balises Liquid. Sélectionnez une balise pour la mettre en forme correctement et poursuivez votre saisie.

Capture d’écran d’un extrait de code avec un exemple de finalisation de la balise Liquid.

Objets Liquid

Vous pouvez voir les exécutions de code de l’objet Liquid en saisissant {{ }}. Avec le curseur placé entre les crochets, sélectionnez <CTRL + space> pour afficher une liste d’objets Liquid que vous pouvez sélectionner. Si l’objet a d’autres propriétés, vous pouvez entrer ., puis sélectionner à nouveau <CTRL + space> pour voir les propriétés spécifiques de l’objet Liquid.

Capture d’écran montrant la saisie d’un objet Liquid.

Balises de modèle

Vous pouvez voir des suggestions de modèle web Power Pages en plaçant votre curseur dans l’instruction {include ' '} et en sélectionnant <CTRL> - space. Une liste de modèles web existants apparaît pour que vous puissiez les sélectionner.

Capture d’écran des balises de modèle.

Créer, supprimer et renommer des objets du site web

Depuis Visual Studio Code, vous pouvez créer, supprimer et renommer les composants du site web suivants :

  • Pages Web
  • Modèles de page
  • Modèles Web
  • Extraits de contenu
  • Nouveaux actifs (fichiers web)

Opérations de création

Vous pouvez utiliser les options du menu contextuel pour créer de nouveaux composants de site Web. Cliquez avec le bouton droit sur l’un des objets pris en charge, choisissez Power Pages et sélectionnez le type d’objet de site web que vous souhaitez créer.

Sinon, vous pouvez utiliser la palette de commandes Visual Studio Code en sélectionnant Ctrl + Shift + P.

Créer un nouvel objet.

Vous devez spécifier plus de paramètres pour créer l’objet.

Object Paramètres
Pages Web Nom, modèle de page, page parent
Modèles de page Nom, modèle web
Modèles Web Nom 
Extraits de contenu Nom, et si l’extrait est au format HTML ou texte.
Nouveaux actifs (fichiers web) Nom, page parent et sélectionnez le fichier à charger.

Renommer et supprimer des opérations

À partir de la navigation des fichiers, vous pouvez utiliser le menu contextuel pour renommer ou supprimer des composants Power Pages.

Note

Les objets supprimés peuvent être restaurés à partir de la corbeille du bureau.

Limitations

Les limitations suivantes s’appliquent actuellement à Power Platform Tools pour les portails :

  • Les fonctions Autocomplétion ne prennent en charge qu’une fonctionnalité limitée.

Prise en charge de Power Pages pour Microsoft Power Platform CLI (version préliminaire)