Defina seu ambiente de desenvolvimento

Este guia ajuda você a configurar ferramentas para criar suplementos do Office seguindo nossos tutoriais ou inícios rápidos. Se você já os tiver instalados, estará pronto para iniciar um início rápido, como este Início rápido do Excel React.

Obter o Microsoft 365

Você precisa de uma conta do Microsoft 365. Você pode se qualificar para uma assinatura de desenvolvedor do Microsoft 365 E5, que inclui todos os aplicativos do Office, por meio do Programa de Desenvolvedor do Microsoft 365. Para obter detalhes, consulte as Perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 mês ou adquirir um plano do Microsoft 365.

Instale o ambiente

Há três tipos de ambientes de desenvolvimento para escolher. A estrutura de projetos de Suplemento do Office criada nos três ambientes é diferente, portanto, se várias pessoas estiverem trabalhando em um projeto de suplemento, todas deverão usar o mesmo ambiente.

  • Node.js ambiente: Neste ambiente, suas ferramentas são instaladas e executadas em uma linha de comando. A parte do lado do servidor do aplicativo Web do suplemento é escrita em JavaScript ou TypeScript e é hospedada em um Node.js runtime. Existem muitas ferramentas úteis de desenvolvimento de suplementos nesse ambiente, como um linter do Office e um empacotador/executor de tarefas chamado webpack. A ferramenta de criação e scaffolding de projetos é uma ferramenta de linha de comando chamada Office Yeoman Generator (também chamada de "Yo Office"), embora você ainda possa usar as extensões do Visual Studio Code mencionadas na próxima opção.
  • Visual Studio Code: escolha este ambiente se você usa o Visual Studio Code e prefere criar projetos a partir de uma extensão em vez de ferramentas de linha de comando. A ferramenta de criação e scaffolding de projetos é o Microsoft 365 Agents Toolkit.
  • Ambiente Visual Studio: escolha esse ambiente somente se o computador de desenvolvimento for Windows e você quiser desenvolver o lado do servidor do suplemento com uma linguagem e uma estrutura baseadas em .NET, como o ASP.NET. Os modelos de projeto de suplemento no Visual Studio não são atualizados com a mesma frequência que aqueles no ambiente Node.js. Mais informações posteriormente na guia ambiente do Visual Studio .

Observação

Visual Studio para Mac não inclui os modelos de scaffolding de projeto para Suplementos do Office, portanto, se seu computador de desenvolvimento for um Mac, você deverá trabalhar com os ambientes Node.js ou Visual Studio Code.

Selecione a guia para o ambiente que você escolher.

As principais ferramentas a serem instaladas são:

  • Node.js
  • npm
  • Um editor de código de sua escolha
  • Gerador de Yeoman de escritório (Yo Office)
  • O linter JavaScript do Office

Este guia pressupõe que você saiba como usar uma ferramenta de linha de comando.

Instalar Node.js e npm

Node.js é um tempo de execução JavaScript que você usa para desenvolver suplementos modernos do Office.

Instale Node.js baixando a última versão recomendada de seu site. Siga as instruções de instalação para o seu sistema operacional.

npm é um registro de software de código aberto a partir do qual é possível baixar os pacotes usados no desenvolvimento de Suplementos do Office. Geralmente é instalado automaticamente quando você instala Node.js. Para marcar se você já tem o npm instalado e ver a versão instalada, execute o seguinte na linha de comando.

npm -v

Se, por qualquer motivo, você quiser instalá-lo manualmente, execute o seguinte na linha de comando.

npm install npm -g

Dica

Você pode querer usar um gerenciador de versão do Node para permitir que você alterne entre várias versões do Node.js e do npm, mas isso não é estritamente necessário. Para obter detalhes sobre como fazer isso, consulte as instruções do npm.

Instalar um editor de códigos

Você pode usar qualquer editor de código ou IDE que dê suporte ao desenvolvimento do lado do cliente para criar sua Web Part, como o Visual Studio Code.

Instale o gerador Yeoman — Yo Office

A ferramenta de criação de projetos e scaffolding é o gerador Yeoman para Suplementos do Office, carinhosamente conhecido como Yo Office. Você precisa instalar a versão mais recente do Yeoman e Yo Office. Para instalar essas ferramentas globalmente, execute o seguinte comando por meio do prompt de comando.

npm install -g yo generator-office

Instalar e usar o lint JavaScript do Office

A Microsoft fornece um linter JavaScript para ajudá-lo a detectar erros comuns ao usar a biblioteca JavaScript do Office. Se você criar um projeto de suplemento com o gerador Yeoman para Suplementos do Office ou Agents Toolkit, o linter será instalado e configurado para você. Pule para Executar o linter.

Se você criou seu projeto manualmente, instale e configure o linter com as etapas a seguir.

  1. Na raiz do projeto, execute os dois comandos a seguir (depois de instalar o Node.js e o npm).

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

  2. Na raiz do projeto, crie um arquivo de texto chamado eslint.config.js (ou .mjs), se ainda não houver um. Herdar a configuração recomendada para eslint-plugin-office-addins. O plugins objeto deve incluir um mapeamento para o eslint-plugin-office-addins objeto do plug-in. A seguir está um exemplo simples que inclui configurações para TypeScript. Seu arquivo eslint.config.js pode ter propriedades e configurações adicionais.

     const officeAddins = require("eslint-plugin-office-addins");
 const tsParser = require("@typescript-eslint/parser");
 const tsEsLint = require("typescript-eslint");

 export default [
   ...tsEsLint.configs.recommended,
   ...officeAddins.configs.recommended,
   {
     plugins: {
       "office-addins": officeAddins,
     },
     languageOptions: {
       parser: tsParser,
     },
   },
 ];

  3. Na raiz do projeto, abra o arquivo package.json e verifique se a scripts matriz tem o seguinte membro.

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

Executar o linter

Execute o linter com o seguinte comando no terminal de um editor, como o Visual Studio Code, ou em um prompt de comando. Os problemas encontrados pelo linter aparecem no terminal ou no prompt e também aparecem diretamente no código quando você está usando um editor que dá suporte a mensagens linter, como o Visual Studio Code.

npm run lint

Instalar o Script Lab

O Script Lab é uma ferramenta para prototipagem rápida de código que chama as APIs da Biblioteca JavaScript do Office. O próprio Script Lab é um suplemento do Office e pode ser instalado a partir do Microsoft Marketplace no Script Lab. Há uma versão para o Excel, o PowerPoint e o Word, e uma versão separada para o Outlook. Para obter informações sobre como usar o Script Lab, consulte Explorar a API JavaScript do Office usando o Script Lab.

Próximas etapas

Tente criar seu próprio suplemento ou usar o Script Lab para experimentar exemplos internos.

Criar um Suplemento do Office

Você pode criar rapidamente um suplemento básico para o Excel, o OneNote, o Outlook, o PowerPoint, o Project ou o Word realizando um início rápido de 5 minutos. Se você concluiu um início rápido anteriormente e deseja criar um suplemento um pouco mais complexo, experimente um tutorial.

Explorar as APIs com o Script Lab

Explore a biblioteca de amostras internas no Script Lab para ter uma ideia dos recursos das APIs JavaScript para Office.

Confira também

  • Last updated on