设置开发环境

项目
02/13/2024

本指南可帮助你设置工具，以便你可以按照我们的快速入门或教程创建 Office 加载项。如果已安装这些组件，则可以开始快速入门，例如此 Excel React快速入门。

获取 Microsoft 365

你需要一个 Microsoft 365 帐户。你可能有资格通过 Microsoft 365 开发人员计划获得Microsoft 365 E5开发人员订阅，其中包括所有 Office 应用;有关详细信息，请参阅常见问题解答。或者，可以注册 1 个月的免费试用版或购买 Microsoft 365 计划。

安装环境

有两种类型的开发环境可供选择。在两个环境中创建的 Office 外接程序项目的基架是不同的，因此，如果多个人员将处理外接程序项目，他们都必须使用相同的环境。

Node.js 环境：建议使用。在此环境中，工具在命令行中安装并运行。外接程序的 Web 应用程序部件的服务器端以 JavaScript 或 TypeScript 编写，并托管在 Node.js 运行时中。此环境中有许多有用的加载项开发工具，例如 Office linter 和名为 WebPack 的捆绑程序/任务运行器。项目创建和基架工具 Yo Office 经常更新。
Visual Studio 环境：仅当开发计算机是 Windows，并且你想要使用基于 .NET 的语言和框架（例如 ASP.NET）开发外接程序的服务器端时，才选择此环境。 Visual Studio 中的外接程序项目模板的更新频率不如 Node.js 环境中的更新频率高。无法使用内置的 Visual Studio 调试器调试客户端代码，但可以使用浏览器的开发工具调试客户端代码。有关详细信息，请参阅 Visual Studio 环境 选项卡。

注意

Visual Studio for Mac不包括 Office 外接程序的项目基架模板，因此，如果开发计算机是 Mac，则应使用 Node.js 环境。

选择所选环境的选项卡。

Node.js 环境
Visual Studio 环境

要安装的main工具包括：

Node.js
npm
你选择的代码编辑器
Yo Office
Office JavaScript linter

本指南假定你知道如何使用命令行工具。

安装 Node.js 和 npm

Node.js 是用于开发新式 Office 外接程序的 JavaScript 运行时。

通过从其网站下载最新推荐版本来安装 Node.js。按照操作系统的安装说明进行操作。

npm 是一个开放源代码软件注册表，可从中下载用于开发 Office 加载项的包。安装 Node.js 时，它通常会自动安装。若要检查已安装 npm 并查看已安装的版本，请在命令行中运行以下命令。

npm -v

如果出于任何原因想要手动安装，请在命令行中运行以下命令。

npm install npm -g

提示

你可能希望使用 Node 版本管理器在 Node.js 和 npm 的多个版本之间切换，但这并非严格必要。有关如何执行此操作的详细信息，请参阅 npm 的说明。

安装代码编辑器

若要生成 Web 部件，可以使用任何支持客户端开发的代码编辑器或 IDE，如：

建议) Visual Studio Code (Visual Studio Code
Atom
Webstorm

安装 Yeoman 生成器 — Yo Office

项目创建和基架工具是 Office 加载项的 Yeoman 生成器，亲切地称为 Yo Office。你需要安装最新版本的 Yeoman 和 Yo Office。若要全局安装这些工具，请通过命令提示符运行以下命令。

npm install -g yo generator-office

安装和使用 Office JavaScript linter

Microsoft 提供了 JavaScript linter，可帮助你在使用 Office JavaScript 库时捕获常见错误。若要安装 linter，请在安装 Node.js 和 npm) 后 (运行以下两个命令。

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

如果使用 Office 外接程序工具的 Yeoman 生成器创建 Office 外接程序项目，则其余的设置将为你完成。在编辑器的终端（如 Visual Studio Code）或命令提示符中使用以下命令运行 linter。 linter 发现的问题将显示在终端或提示符中，并且在使用支持 linter 消息的编辑器（如 Visual Studio Code）时，也会直接显示在代码中。 (有关安装 Yeoman 生成器的信息，请参阅 Yeoman generator for Office Add-ins.)

npm run lint

如果加载项项目是采用其他方式创建的，请执行以下步骤。

在项目的根目录中，创建一个名为 .eslintrc.json 的文本文件（如果还没有文件）。请确保它具有名为 plugins 和 extends的属性，这两种属性都是数组类型。数组 plugins 应包含 "office-addins" ，数组 extends 应包含 "plugin:office-addins/recommended"。下面展示了一个非常简单的示例。 .eslintrc.json 文件可能具有这两个数组的其他属性和附加成员。
```
{
  "plugins": [
    "office-addins"
  ],
  "extends": [
    "plugin:office-addins/recommended"
  ]
}
```
在项目的根目录中，打开 package.json 文件， scripts 并确保数组具有以下成员。
```
"lint": "office-addin-lint check",
```
在编辑器的终端（如 Visual Studio Code）或命令提示符中使用以下命令运行 linter。 linter 发现的问题将显示在终端或提示符中，并且在使用支持 linter 消息的编辑器（如 Visual Studio Code）时，也会直接显示在代码中。
```
npm run lint
```

安装Script Lab

Script Lab是一种用于快速创建调用 Office JavaScript 库 API 的代码原型的工具。 Script Lab本身是一个 Office 加载项，可从 Script Lab 的 AppSource 安装。 Excel、PowerPoint 和 Word 有一个版本，还有一个单独的 Outlook 版本。有关如何使用 Script Lab 的信息，请参阅使用 Script Lab 探索 Office JavaScript API。

注意

从基于 Chromium 的浏览器（例如 Chrome 和 Edge）的版本 115 开始，存储分区将进行测试，以防止特定侧通道跨站点跟踪 (另请参阅 Microsoft Edge 浏览器策略) 。此更改阻止Script Lab代码片段在 Outlook 网页版中运行。若要解决此问题，请在浏览器中转到 chrome://flags 或 edge://flags ，然后将 “第三方存储分区 (#third-party-storage-partitioning) ”标志设置为 “已禁用”。

后续步骤

尝试创建自己的加载项或使用Script Lab来试用内置示例。

创建 Office 加载项

可完成 5 分钟快速入门，快速创建适合 Excel、OneNote、Outlook、PowerPoint、Project 或 Word 的基本加载项。如果你之前已完成快速入门，并且想要创建更复杂一些的加载项，请尝试本教程。

使用 Script Lab 了解 API

了解 Script Lab 中的内置示例库，熟悉 Office JavaScript API 的功能。