使用 Visual Studio Code 开发 Office 加载项

项目
02/14/2025

本文介绍如何使用 Visual Studio Code (VS Code) 开发 Office 加载项。

注意

要了解如何使用 Visual Studio 创建 Office 加载项，请参阅使用 Visual Studio 开发 Office 加载项。

先决条件

Visual Studio Code

Node.js（最新LTS 版本）。访问 Node.js 站点，下载并安装适合你的作系统的版本。
最新版本的 Yeoman 和适用于 Office 加载项的 Yeoman 生成器。若要全局安装这些工具，请从命令提示符处运行以下命令。
```
npm install -g yo generator-office
```
注意

即便先前已安装了 Yeoman 生成器，我们还是建议你通过 npm 将包更新为最新版本。
已连接到 Microsoft 365 订阅的 Office (包括 Office 网页版)。

注意

如果还没有 Office，可以通过 Microsoft 365 开发人员计划获得Microsoft 365 E5开发人员订阅;有关详细信息，请参阅常见问题解答。或者，可以注册 1 个月的免费试用版或购买 Microsoft 365 计划。

使用 Yeoman 生成器创建加载项项目

如果你正在将 VS Code 用作集成开发环境 (IDE)，则应使用适用于 Office 加载项的 Yeoman 生成器来创建 Office 加载项项目。Yeoman 生成器会创建一个 Node.js 项目，它可通过 VS Code 或任何其他编辑器进行管理。

要使用 Yeoman 生成器创建 Office 加载项，请按照 5 分钟快速入门中与你要创建的加载项类型相对应的说明进行操作。

使用 VS Code 开发加载项

在 Yeoman 生成器完成加载项项目的创建后，请使用 VS Code 打开项目的根文件夹。

提示

在 Windows 上，可通过命令行导航到项目的根目录，然后输入 code .在 VS Code 中打开该文件夹。在 Mac 上，需要先将 code 命令添加到路径中，然后才可使用该命令在 VS Code 中打开项目文件夹。

Yeoman 生成器会创建一个功能受限的基本加载项。你可通过在 VS Code 中编辑清单HTML、JavaScript/TypeScript 和 CSS 文件，自定义该加载项。要简要了解 Yeoman 生成器创建的加载项项目中的项目结构和文件，请查看 5 分钟快速入门中与你创建的加载项类型相对应的 Yeoman 生成器指南。

使用 Office 外接程序开发工具包 (预览版) 创建外接程序项目

Office 外接程序开发工具包是一个Visual Studio Code扩展，允许你直接从 VS Code 创建新项目。有关安装扩展以及从模板和示例创建项目的信息，请参阅使用 Office 外接程序开发工具包创建用于Visual Studio Code的 Office 外接程序开发工具包。

重要

Office 外接程序开发工具包扩展仅支持创建使用仅加载项清单的加载项。此时，它还仅创建 Excel、PowerPoint 和Word加载项。正在开发对 Outlook 的支持，以及其他示例和其他改进。我们欢迎你对该工具的任何反馈。应通过扩展存储库上的 GitHub 问题提交问题和功能请求。

测试和调试加载项

用于测试、调试和故障排除 Office 加载项的方法因平台而异。有关详细信息，请参阅测试和调试 Office 加载项。

发布加载项

Office 加载项包括两个基本组件：清单文件和你自己的 Web 应用程序。此清单定义各种设置，包括将外接程序与 Office 客户端集成的方式。 Web 应用程序提供 HTML、JavaScript 和其他文件，这些文件提供加载项的功能和 UI。

开发加载项时，可在本地 Web 服务器 (localhost) 上运行加载项，但如果已准备好发布该加载项供其他用户访问，则需要将 Web 应用程序部署到 Web 服务器或 Web 托管服务（例如 Microsoft Azure），并更新清单以指定所部署的应用程序的 URL。

如果加载项如期工作且你已准备好发布它供其他用户访问，请完成以下步骤。

通过命令行，在加载项项目的根目录中运行以下命令，准备所有文件供生产部署使用。
```
npm run build
```
生成完成后，加载项项目的根目录中的 dist 文件夹将包含要在后续步骤中部署的文件。
将 dist 文件夹的内容上传到要托管你的加载项的 Web 服务器。可使用任意类型的 Web 服务器或 Web 托管服务来托管加载项。
在 VS Code 中，打开位于项目的根目录中的外接程序清单文件。将所有出现的 https://localhost:3000 都替换为上一步中已部署到 Web 服务器的 Web 应用程序的 URL。
选择要用于部署 Office 外接程序的方法，并按照说明发布加载项。

通过