Muokkaa

Jaa

Set up your development environment

  • Artikkeli

This guide helps you set up tools so you can create Office Add-ins by following our quick starts or tutorials. If you already have these installed, you're ready to begin a quick start, such as this Excel React quick start.

Get Microsoft 365

You need a Microsoft 365 account. You might qualify for a Microsoft 365 E5 developer subscription, which includes all Office apps, through the Microsoft 365 Developer Program; for details, see the FAQ. Alternatively, you can sign up for a 1-month free trial or purchase a Microsoft 365 plan.

Install the environment

There are three kinds of development environments to choose from. The scaffolding of Office Add-in projects that is created in the three environments is different, so if multiple people will be working on an add-in project, they must all use the same environment.

  • Node.js environment: Recommended. In this environment, your tools are installed and run at a command line. The server-side of the web application part of the add-in is written in JavaScript or TypeScript and is hosted in a Node.js runtime. There are many helpful add-in development tools in this environment, such as an Office linter and a bundler/task-runner called webpack. The project creation and scaffolding tool is a command line tool called the Office Yeoman Generator (also called "Yo Office"), though you can still use the Visual Studio Code extensions mentioned in the next option.
  • Visual Studio Code: Choose this environment if you use Visual Studio Code and would prefer to create projects from extensions rather than command line tools. The project creation and scaffolding tools are the Teams Toolkit or Office Add-ins Development Kit extensions.
  • Visual Studio environment: Choose this environment only if your development computer is Windows, and you want to develop the server-side of the add-in with a .NET based language and framework, such as ASP.NET. The add-in project templates in Visual Studio aren't updated as frequently as those in the Node.js environment. More information later on the Visual Studio environment tab.

Note

Visual Studio for Mac doesn't include the project scaffolding templates for Office Add-ins, so if your development computer is a Mac, you should work with the Node.js environment.

Select the tab for the environment you choose.

The main tools to be installed are:

  • Node.js
  • npm
  • A code editor of your choice
  • Office Yeoman Generator (Yo Office)
  • The Office JavaScript linter

This guide assumes that you know how to use a command-line tool.

Install Node.js and npm

Node.js is a JavaScript runtime you use to develop modern Office Add-ins.

Install Node.js by downloading the latest recommended version from their website. Follow the installation instructions for your operating system.

npm is an open source software registry from which to download the packages used in developing Office Add-ins. It's usually installed automatically when you install Node.js. To check if you already have npm installed and see the installed version, run the following in the command line.

npm -v

If, for any reason, you want to install it manually, run the following in the command line.

npm install npm -g

Tip

You may wish to use a Node version manager to allow you to switch between multiple versions of Node.js and npm, but this isn't strictly necessary. For details on how to do this, see npm's instructions.

Install a code editor

You can use any code editor or IDE that supports client-side development to build your web part, such as:

Install the Yeoman generator — Yo Office

The project creation and scaffolding tool is Yeoman generator for Office Add-ins, affectionately known as Yo Office. You need to install the latest version of Yeoman and Yo Office. To install these tools globally, run the following command via the command prompt.

npm install -g yo generator-office

Install and use the Office JavaScript linter

Microsoft provides a JavaScript linter to help you catch common errors when using the Office JavaScript library. If you create an add-in project with either the Yeoman generator for Office Add-ins or Teams Toolkit, then the linter is installed and configured for you. Skip to Run the linter.

If you created your project manually, install and configure the linter with the following steps.

  1. In the root of the project, run the following two commands (after you've installed Node.js and npm).

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

  2. In the root of the project, create a text file named .eslintrc.json, if there isn't one already there. Be sure it has properties named plugins and extends, both of type array. The plugins array should include "office-addins" and the extends array should include "plugin:office-addins/recommended". The following is a simple example. Your .eslintrc.json file may have additional properties and additional members of the two arrays.

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

  3. In the root of the project, open the package.json file and be sure that the scripts array has the following member.

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

Run the linter

Run the linter with the following command either in the terminal of an editor, such as Visual Studio Code, or in a command prompt. Problems found by the linter appear in the terminal or prompt, and also appear directly in the code when you're using an editor that supports linter messages, such as Visual Studio Code.

npm run lint

Install Script Lab

Script Lab is a tool for quickly prototyping code that calls the Office JavaScript Library APIs. Script Lab is itself an Office Add-in and can be installed from AppSource at Script Lab. There's a version for Excel, PowerPoint, and Word, and a separate version for Outlook. For information about how to use Script Lab, see Explore Office JavaScript API using Script Lab.

Next steps

Try creating your own add-in or use Script Lab to try built-in samples.

Create an Office Add-in

You can quickly create a basic add-in for Excel, OneNote, Outlook, PowerPoint, Project, or Word by completing a 5-minute quick start. If you've previously completed a quick start and want to create a slightly more complex add-in, you should try a tutorial.

Explore the APIs with Script Lab

Explore the library of built-in samples in Script Lab to get a sense for the capabilities of the Office JavaScript APIs.

See also