Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
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.
Conditions préalables
Avant d’utiliser l’extension Visual Studio Code pour Power Pages, vous devez :
Télécharger, installer et configurer Visual Studio Code. Plus d’informations : téléchargez Visual Studio Code
Configurez votre environnement et votre système pour la prise en charge de Power Pages CI/CD à l’aide de la CLI. Informations complémentaires : Microsoft Power Platform CLI (version préliminaire)
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 :
Ouvrez Visual Studio Code.
Sélectionnez Extensions depuis le volet gauche.
Sélectionnez l’icône Paramètres en haut à droite dans le volet des extensions.
Recherchez et sélectionnez Power Platform Tools.
Cliquez sur Installer.
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 :
Sélectionnez le bouton Changer d’environnement dans le volet Actions Power Pages.
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.
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 :
Ouvrez Visual Studio Code.
Allez dans Fichier>Préférences>Thème>Thème d’icône de fichier
Sélectionnez le thème pour les icônes des portails PowerApps.
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.
Le volet d’aperçu s’ouvre 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.
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.
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.
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.
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
.
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.
Informations associées
Prise en charge de Power Pages pour Microsoft Power Platform CLI (version préliminaire)