Configuration de votre environnement de développement

Ce guide vous aide à configurer des outils pour créer des compléments Office en suivant nos guides de démarrage rapide ou didacticiels. Si vous les avez déjà installés, vous êtes prêt à commencer un démarrage rapide, tel que ce guide de démarrage rapide Excel React.

Obtenir Microsoft 365

Vous avez besoin d’un compte Microsoft 365. Vous pouvez bénéficier d’un abonnement Microsoft 365 E5 développeur, qui inclut toutes les applications Office, par le biais du Programme pour les développeurs Microsoft 365. Pour plus d’informations, consultez le FAQ. Vous pouvez également vous inscrire à un essai gratuit de 1 mois ou acheter un plan Microsoft 365.

Installer l’environnement

Vous avez le choix entre deux types d’environnements de développement. La structure des projets de complément Office créée dans les deux environnements est différente. Par conséquent, si plusieurs personnes travaillent sur un projet de complément, elles doivent toutes utiliser le même environnement.

• environnementNode.js : recommandé. Dans cet environnement, vos outils sont installés et exécutés sur une ligne de commande. Le côté serveur du composant d’application web du complément est écrit en JavaScript ou TypeScript et est hébergé dans un runtime Node.js. Il existe de nombreux outils de développement de compléments utiles dans cet environnement, tels qu’un linter Office et un bundler/task-runner appelé WebPack. L’outil de création et de génération de modèles de projet, Yo Office, est fréquemment mis à jour.
• Environnement Visual Studio : choisissez cet environnement uniquement si votre ordinateur de développement est Windows et que vous souhaitez développer le côté serveur du complément avec un langage et une infrastructure .NET, comme ASP.NET. Les modèles de projet de complément dans Visual Studio ne sont pas mis à jour aussi fréquemment que ceux de l’environnement Node.js. Le code côté client ne peut pas être débogué avec le débogueur Visual Studio intégré, mais vous pouvez déboguer du code côté client avec les outils de développement de votre navigateur. Plus d’informations ultérieurement sous l’onglet Environnement Visual Studio .

Remarque

Visual Studio pour Mac n’inclut pas les modèles de génération automatique de projets pour les compléments Office. Par conséquent, si votre ordinateur de développement est un Mac, vous devez utiliser l’environnement Node.js.

Sélectionnez l’onglet correspondant à l’environnement que vous choisissez.

environnementNode.js

Les outils main à installer sont les suivants :

• Node.js
• npm
• Un éditeur de code de votre choix
• Yo Office
• Le linter JavaScript Office

Ce guide part du principe que vous savez utiliser un outil en ligne de commande.

Installer Node.js et npm

Node.js est un runtime JavaScript que vous utilisez pour développer des compléments Office modernes.

Installez Node.js en téléchargeant la dernière version recommandée à partir de leur site web. Suivez les instructions d’installation de votre système d’exploitation.

npm est un registre de logiciels open source à partir duquel télécharger les packages utilisés dans le développement de compléments Office. Il est généralement installé automatiquement lorsque vous installez Node.js. Pour case activée si npm est déjà installé et que vous voyez la version installée, exécutez la commande suivante dans la ligne de commande.

npm -v

Si, pour une raison quelconque, vous souhaitez l’installer manuellement, exécutez la commande suivante dans la ligne de commande.

npm install npm -g

Conseil

Vous pouvez utiliser un gestionnaire de versions Node pour vous permettre de basculer entre plusieurs versions de Node.js et npm, mais cela n’est pas strictement nécessaire. Pour plus d’informations sur la procédure à suivre, consultez les instructions de npm.

Installer un éditeur de code

Vous pouvez utiliser n’importe quel éditeur de code ou IDE qui prend en charge le développement côté client pour créer votre composant WebPart, par exemple :

• Visual Studio Code (recommandé)
• Atom
• Webstorm

Installer le générateur Yeoman — Yo Office

L’outil de création et de génération de modèles est le générateur Yeoman pour les compléments Office, affectueusement appelé Yo Office. Vous devez installer la dernière version de Yeoman et Yo Office. Pour installer ces outils globalement, exécutez la commande suivante via l’invite de commandes.

npm install -g yo generator-office

Installer et utiliser le linter JavaScript Office

Microsoft fournit un linter JavaScript pour vous aider à intercepter les erreurs courantes lors de l’utilisation de la bibliothèque JavaScript Office. Pour installer le linter, exécutez les deux commandes suivantes (après avoir installé Node.js et npm).

npm install office-addin-lint --save-dev
npm install eslint-plugin-office-addins --save-dev

Si vous créez un projet de complément Office avec l’outil Yeoman generator for Office Add-ins , le reste de la configuration est effectué pour vous. Exécutez le linter avec la commande suivante dans le terminal d’un éditeur, tel que Visual Studio Code, ou dans une invite de commandes. Les problèmes détectés par le linter apparaissent dans le terminal ou l’invite, et apparaissent également directement dans le code lorsque vous utilisez un éditeur qui prend en charge les messages linter, comme Visual Studio Code. (Pour plus d’informations sur l’installation du générateur Yeoman, voir Yeoman generator for Office Add-ins.)

npm run lint

Si votre projet de complément a été créé d’une autre façon, procédez comme suit.

1. À la racine du projet, créez un fichier texte nommé .eslintrc.json, s’il n’y en a pas déjà un. Vérifiez qu’il a des propriétés nommées plugins et extends, toutes deux de type tableau. Le plugins tableau doit inclure "office-addins" et le extends tableau doit inclure "plugin:office-addins/recommended". Voici un exemple simple. Votre fichier .eslintrc.json peut avoir des propriétés supplémentaires et des membres supplémentaires des deux tableaux.

   {
     "plugins": [
       "office-addins"
     ],
     "extends": [
       "plugin:office-addins/recommended"
     ]
   }
   

2. À la racine du projet, ouvrez le fichier package.json et vérifiez que le scripts tableau possède le membre suivant.

   "lint": "office-addin-lint check",
   

3. Exécutez le linter avec la commande suivante dans le terminal d’un éditeur, tel que Visual Studio Code, ou dans une invite de commandes. Les problèmes détectés par le linter apparaissent dans le terminal ou l’invite, et apparaissent également directement dans le code lorsque vous utilisez un éditeur qui prend en charge les messages linter, comme Visual Studio Code.

   npm run lint
   

Environnement Visual Studio

Installer Visual Studio

Si Visual Studio 2017 (pour Windows) ou version ultérieure n’est pas installé, installez la dernière version à partir des téléchargements Visual Studio. Veillez à inclure la charge de travail développement Office/SharePoint lorsque le programme d’installation vous demande de spécifier des charges de travail. Les autres charges de travail dont vous aurez peut-être besoin sont les outils de développement web pour la prise en charge du langage .NET, JavaScript et TypeScript (pour le codage côté client du complément) et ASP. Charges de travail liées à NET.

Conseil

Depuis juin 2022, les schémas XML du manifeste de complément Office installés avec Visual Studio ne sont pas la dernière version. Cela peut affecter les compléments, en fonction des fonctionnalités de complément qu’ils utilisent. Par conséquent, vous devrez peut-être mettre à jour les schémas XML pour le manifeste. Pour plus d’informations, consultez Erreurs de validation de schéma de manifeste dans les projets Visual Studio.

Remarque

Pour plus d’informations sur le débogage de code côté client lorsque vous utilisez l’environnement Visual Studio, consultez Déboguer des compléments Office dans Visual Studio. Déboguez le code côté serveur de la même façon que n’importe quelle application web créée dans Visual Studio. Consultez Côté client ou côté serveur.

Installer Script Lab

Script Lab est un outil de prototypage rapide du code qui appelle les API de la bibliothèque JavaScript Office. Script Lab est lui-même un complément Office et peut être installé à partir d’AppSource à Script Lab. Il existe une version pour Excel, PowerPoint et Word, et une version distincte pour Outlook. Pour plus d’informations sur l’utilisation de Script Lab, voir Explorer l’API JavaScript Office à l’aide de Script Lab.

Remarque

À compter de la version 115 des navigateurs basés sur Chromium, tels que Chrome et Edge, le partitionnement du stockage est testé pour empêcher le suivi intersites par canal latéral spécifique (voir aussi stratégies de navigateur Microsoft Edge). Cette modification empêche Script Lab extraits de code de s’exécuter dans Outlook sur le web. Pour contourner ce problème, accédez à chrome://flags ou edge://flags dans votre navigateur, puis définissez l’indicateur Partitionnement de stockage tiers (#third-party-storage-partitioning) sur Désactivé.

Prochaines étapes

Essayez de créer votre propre complément ou utilisez Script Lab pour essayer des exemples intégrés.

Créer un complément Office

Vous pouvez créer rapidement un complément de base pour Excel, OneNote, Outlook, PowerPoint, Project ou Word en effectuant un démarrage rapide de 5 minutes. Si vous avez déjà effectué un démarrage rapide et que vous voulez créer un complément légèrement plus complexe, vous devez essayer le Didacticiel.

Explorez des API avec Script Lab

Explorez la bibliothèque d’exemples intégrés dans Script Lab pour avoir une idée des capacités des API JavaScript Office.

Voir aussi

• Concepts de base pour les compléments Office
• Développement de compléments Office
• Concevoir des compléments Office
• Test et débogage de compléments Office
• Publier des compléments Office
• Découvrez le programme pour les développeurs Microsoft 365