Edit

Set up your development environment

  • Article

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 two kinds of development environments to choose from. The scaffolding of Office Add-in projects that is created in the two 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, Yo Office, is updated frequently.
  • 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. Client-side code can't be debugged with the built-in Visual Studio debugger, but you can debug client-side code with your browser's development tools. 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
  • 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. To install the linter, 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

If you create an Office Add-in project with the Yeoman generator for Office Add-ins tool, then the rest of the setup is done for you. 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. (For information about installing the Yeoman generator, see Yeoman generator for Office Add-ins.)

npm run lint

If your add-in project was created another way, take the following steps.

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

  2. 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",

  3. 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.

Note

Starting in Version 115 of Chromium-based browsers, such as Chrome and Edge, storage partitioning is being tested to prevent specific side-channel cross-site tracking (see also Microsoft Edge browser policies). This change is preventing Script Lab snippets from running in Outlook on the web. To work around this, go to chrome://flags or edge://flags in your browser, then set the Third-party Storage Partitioning (#third-party-storage-partitioning) flag to Disabled.

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 the 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