Поделиться через

Настройка среды разработки

  • Статья

Это руководство поможет вам настроить средства для создания надстроек Office, следуя нашим кратким руководствам или руководствам. Если они уже установлены, вы можете начать краткое руководство, например краткое руководство по Excel React.

Получить Microsoft 365

Вам нужна учетная запись Microsoft 365. Вы можете получить подписку разработчика Microsoft 365 E5, включающую все приложения Office, в рамках программы microsoft 365 developer; Дополнительные сведения см. в разделе Вопросы и ответы. Кроме того, вы можете зарегистрироваться для получения бесплатной пробной версии на 1 месяц или приобрести план Microsoft 365.

Установка среды

Существует два типа сред разработки на выбор. Формирование шаблонов проектов надстроек Office, созданных в двух средах, отличается, поэтому если над проектом надстройки будет работать несколько пользователей, все они должны использовать одну и ту же среду.

  • Node.js среде: рекомендуется. В этой среде ваши средства устанавливаются и запускаются в командной строке. Серверная часть веб-приложения надстройки написана на JavaScript или TypeScript и размещается в среде выполнения Node.js. В этой среде существует множество полезных средств разработки надстроек, таких как кодировщик Office и средство выполнения задач или средство выполнения задач WebPack. Существует два средства создания проектов и формирования шаблонов: средство командной строки с именем Генератор Office Yeoman (также называется "Yo Office") и расширение Visual Studio Code под названием Teams Toolkit.
  • Среда Visual Studio. Выберите эту среду, только если компьютером разработки является Windows, и вы хотите разработать серверную часть надстройки с помощью языка и платформы на основе .NET, например ASP.NET. Шаблоны проектов надстройки в Visual Studio обновляются не так часто, как в среде Node.js. Дополнительные сведения см. далее на вкладке среда Visual Studio .

Примечание.

Visual Studio для Mac не включает шаблоны шаблонов проектов для надстроек Office, поэтому, если компьютер разработки является компьютером Mac, следует работать с Node.js среде.

Выберите вкладку для выбранной среды.

Ниже перечислены основные средства для установки.

  • Node.js

  • npm

  • Редактор кода по вашему выбору

  • Средство создания проекта:

    • Генератор Office Yeoman (Yo Office)
    • Набор средств Teams (требуется Visual Studio Code)

  • Код кода JavaScript для Office

В этом руководстве предполагается, что вы знаете, как использовать программу командной строки.

Установка Node.js и npm

Node.js — это среда выполнения JavaScript, используемая для разработки современных надстроек Office.

Установите Node.js , скачав последнюю рекомендуемую версию с веб-сайта. Следуйте инструкциям по установке операционной системы.

npm — это реестр программного обеспечения с открытым кодом, из которого можно скачать пакеты, используемые при разработке надстроек Office. Обычно он устанавливается автоматически при установке Node.js. Чтобы проверить, установлен ли npm и просмотреть установленную версию, выполните следующую команду в командной строке.

npm -v

Если по какой-либо причине вы хотите установить его вручную, выполните в командной строке следующую команду.

npm install npm -g

Совет

Возможно, вы захотите использовать диспетчер версий Node, чтобы можно было переключаться между несколькими версиями Node.js и npm, но это не обязательно. Дополнительные сведения о том, как это сделать, см. в инструкциях npm.

Установка редактора кода

Для создания веб-частей можно использовать любой редактор кода или интерфейс IDE, поддерживающий клиентскую разработку, например:

Установка средства создания проекта

Проекты надстроек Office можно создавать с помощью генератора Office Yeoman (Yo Office) или расширения Набора средств Teams для Visual Studio Code.

Установка генератора Yeoman — Yo Office

Инструмент создания проектов и формирования шаблонов — это генератор Yeoman для надстроек Office, известный как Yo Office. Необходимо установить последнюю версию Yeoman и Yo Office. Выполните в командной строке указанную ниже команду, чтобы установить эти инструменты глобально.

npm install -g yo generator-office

Установка набора средств Teams

Установите Visual Studio Code , а затем установите последнюю версию набора средств Teams, как описано в разделе Установка набора средств Teams.

Установка и использование кода JavaScript для Office

Корпорация Майкрософт предоставляет код JavaScript, помогающий перехватывать распространенные ошибки при использовании библиотеки JavaScript для Office. При создании проекта надстройки с помощью генератора Yeoman для надстроек Office или набора средств Teams код будет установлен и настроен для вас. Перейдите к разделу Запуск кода кода.

Если вы создали проект вручную, установите и настройте код, выполнив следующие действия.

  1. В корневой папке проекта выполните следующие две команды (после установки Node.js и npm).

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

  2. В корне проекта создайте текстовый файл с именем .eslintrc.json, если его еще нет. Убедитесь, что у него есть свойства с именами plugins и extends, как для массива типов. Массив plugins должен включать , "office-addins" а extends массив — "plugin:office-addins/recommended". Ниже приведен простой пример. Файл .eslintrc.json может иметь дополнительные свойства и дополнительные члены двух массивов.

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

  3. В корневой папке проекта откройте файл package.json и убедитесь, что scripts массив содержит следующий член.

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

Запуск анализатора кода

Выполните код с помощью следующей команды либо в терминале редактора, например Visual Studio Code, либо в командной строке. Проблемы, обнаруженные анализатором кода, отображаются в терминале или запросе, а также отображаются непосредственно в коде при использовании редактора, поддерживающего код сообщений, например Visual Studio Code.

npm run lint

Установка лаборатории сценариев

Script Lab — это средство для быстрого создания прототипов кода, которое вызывает API библиотеки JavaScript для Office. Script Lab сама по себе является надстройкой Office и может быть установлена из AppSource в Script Lab. Существует версия для Excel, PowerPoint и Word, а также отдельная версия для Outlook. Сведения об использовании Script Lab см. в статье Изучение API JavaScript для Office с помощью лаборатории сценариев.

Примечание.

Начиная с версии 115 для браузеров на основе Chromium, таких как Chrome и Edge, секционирование хранилища включено, чтобы предотвратить отслеживание между сайтами по боковому каналу (см. также политики браузера Microsoft Edge). Это изменение не позволяет выполнять фрагменты кода лаборатории сценариев в Outlook в Интернете.

Дальнейшие действия

Попробуйте создать собственную надстройку или используйте Script Lab , чтобы попробовать встроенные примеры.

Создание надстройки Office

Вы можете быстро создать простую надстройку для Excel, OneNote, Outlook, PowerPoint, Project или Word с помощью 5-минутного краткого руководства по началу работы. Если вы ранее завершили краткое руководство и хотите создать немного более сложную надстройку, ознакомьтесь с руководством.

Изучение API с помощью Script Lab

Изучите библиотеку встроенных примеров в Script Lab, чтобы ознакомиться с возможностями API JavaScript для Office.

См. также