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

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

Получить Microsoft 365

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

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

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

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

Примечание.

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

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

средаNode.js

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

• Node.js
• npm
• Редактор кода по вашему выбору
• Yo Office
• Код кода 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, поддерживающий клиентскую разработку, например:

• Visual Studio Code (рекомендуется)
• Atom;
• Webstorm

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

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

npm install -g yo generator-office

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

Корпорация Майкрософт предоставляет код JavaScript, помогающий перехватывать распространенные ошибки при использовании библиотеки JavaScript для Office. Чтобы установить код, выполните следующие две команды (после установки Node.js и npm).

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

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

npm run lint

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

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

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

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

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

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

   npm run lint
   

Среда Visual Studio

Установка Visual Studio

Если вы не установили Visual Studio 2017 (для Windows) или более поздней версии, установите последнюю версию из раздела Загрузки Visual Studio. Обязательно включите рабочую нагрузку разработка Office/SharePoint , когда установщик просит указать рабочие нагрузки. Другие рабочие нагрузки, которые могут потребоваться: средства веб-разработки для .NET, поддержка языка JavaScript и TypeScript (для написания кода на стороне клиента надстройки) и ASP. Рабочие нагрузки, связанные с NET.

Совет

По состоянию на июнь 2022 г. XML-схемы манифеста надстройки Office, установленные в Visual Studio, не являются последней версией. Это может повлиять на надстройки в зависимости от того, какие функции надстройки они используют. Таким образом, может потребоваться обновить XML-схемы для манифеста. Дополнительные сведения см. в статье Ошибки проверки схемы манифеста в проектах Visual Studio.

Примечание.

Сведения об отладке клиентского кода при использовании среды Visual Studio см. в статье Отладка надстроек Office в Visual Studio. Отладка кода на стороне сервера аналогично любому веб-приложению, созданному в Visual Studio. См. статью На стороне клиента или на стороне сервера.

Установка Script Lab

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

Примечание.

Начиная с версии 115 для браузеров на основе Chromium, таких как Chrome и Edge, выполняется тестирование секционирования хранилища, чтобы предотвратить отслеживание между сайтами по боковому каналу (см. также политики браузера Microsoft Edge). Это изменение предотвращает запуск фрагментов Script Lab в Outlook в Интернете. Чтобы обойти эту проблему, перейдите в раздел chrome://flags или edge://flags в браузере, а затем установите для флага Секционирование стороннего хранилища (#third-party-storage-partitioning) значение Отключено.

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

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

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

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

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

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

См. также

• Основные принципы надстроек Office
• Разработка надстроек Office
• Проектирование надстроек Office
• Тестирование и отладка надстроек Office
• Публикация надстроек Office
• Сведения о программе для разработчиков Microsoft 365