Partager via

Configuration de votre environnement de développement

  • Article

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 trois types d’environnements de développement. La structure des projets de complément Office créée dans les trois 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 automatique de projets est un outil en ligne de commande appelé Générateur Yeoman Office (également appelé « Yo Office »), bien que vous puissiez toujours utiliser les extensions Visual Studio Code mentionnées dans l’option suivante.
  • Visual Studio Code : choisissez cet environnement si vous utilisez Visual Studio Code et que vous préférez créer des projets à partir d’extensions plutôt que d’outils en ligne de commande. Les outils de création et de génération de modèles de projet sont les extensions du Kit de ressources Teams ou du Kit de développement de compléments Office.
  • 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. 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.

Les outils main à installer sont les suivants :

  • Node.js
  • npm
  • Un éditeur de code de votre choix
  • Générateur Yeoman Office (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 :

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. Si vous créez un projet de complément avec le générateur Yeoman pour les compléments Office ou teams Toolkit, le linter est installé et configuré pour vous. Passez à Exécuter le linter.

Si vous avez créé votre projet manuellement, installez et configurez le linter en procédant comme suit.

  1. À la racine du projet, 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

  2. À 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"
  ]
}

  3. À 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",

Exécuter le linter

Exécutez le linter avec la commande suivante dans le terminal d’un éditeur, par exemple 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, tels que Visual Studio Code.

npm run lint

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.

Étapes suivantes

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à terminé un démarrage rapide et que vous souhaitez créer un complément légèrement plus complexe, vous devez suivre un tutoriel.

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