Defina seu ambiente de desenvolvimento

  • Artigo

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

Obter o Microsoft 365

Você precisa de uma conta do Microsoft 365. Você pode se qualificar para uma assinatura de desenvolvedor 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 comprar um plano do Microsoft 365.

Instalar o ambiente

Há dois tipos de ambientes de desenvolvimento para escolher. O scaffolding de projetos de suplemento do Office que é criado nos dois ambientes é diferente, portanto, se várias pessoas trabalharem em um projeto de suplemento, todos eles devem usar o mesmo ambiente.

  • Node.js ambiente: recomendado. Nesse ambiente, suas ferramentas são instaladas e executadas em uma linha de comando. O lado do servidor da parte do aplicativo Web do suplemento é gravado em JavaScript ou TypeScript e está hospedado em um runtime Node.js. Há muitas ferramentas úteis de desenvolvimento de suplementos nesse ambiente, como um linter do Office e um empacotador/gerenciador de tarefas chamado WebPack. A ferramenta de criação e scaffolding do projeto, Yo Office, é atualizada com frequência.
  • Ambiente do 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 estrutura baseadas em .NET, como ASP.NET. Os modelos de projeto de suplemento no Visual Studio não são atualizados com tanta frequência quanto os do ambiente Node.js. O código do lado do cliente não pode ser depurado com o depurador interno do Visual Studio, mas você pode depurar o código do lado do cliente com as ferramentas de desenvolvimento do navegador. Mais informações posteriormente na guia ambiente do Visual Studio .

Observação

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

Selecione a guia para o ambiente escolhido.

As main ferramentas a serem instaladas são:

  • Node.js
  • npm
  • Um editor de código de sua escolha
  • 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 runtime JavaScript que você usa para desenvolver suplementos modernos do Office.

Instale Node.js baixando a versão recomendada mais recente de seu site. Siga as instruções de instalação do sistema operacional.

npm é um registro de software código aberto do qual baixar os pacotes usados no desenvolvimento de Suplementos do Office. Ele geralmente é instalado automaticamente quando você instala Node.js. Para marcar se você já tiver 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

Talvez você deseje usar um gerenciador de versões do Nó para permitir que você alterne entre várias versões de Node.js e npm, mas isso não é estritamente necessário. Para obter detalhes sobre como fazer isso, confira 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 a web part, como:

Instalar o gerador Yeoman – Yo Office

A ferramenta de criação e scaffolding do projeto é o gerador Yeoman para Suplementos do Office, carinhosamente conhecido como Yo Office. Você precisa instalar a versão mais recente do Yeoman e do 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 linter JavaScript do Office

A Microsoft fornece um linter JavaScript para ajudá-lo a capturar erros comuns ao usar a biblioteca JavaScript do Office. Para instalar o linter, execute os dois comandos a seguir (depois de instalar Node.js e npm).

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

Se você criar um projeto de suplemento do Office com o gerador Yeoman para suplementos do Office , o restante da configuração será feita para você. Execute o linter com o comando a seguir no terminal de um editor, como Visual Studio Code ou em um prompt de comando. Os problemas encontrados pelo linter aparecem no terminal ou prompt e também aparecem diretamente no código quando você está usando um editor que dá suporte a mensagens de linter, como Visual Studio Code. (Para obter informações sobre como instalar o gerador Yeoman, consulte Gerador Yeoman para Suplementos do Office.)

npm run lint

Se o projeto de suplemento foi criado de outra maneira, siga as etapas a seguir.

  1. Na raiz do projeto, crie um arquivo de texto chamado .eslintrc.json, se ainda não houver um. Certifique-se de que ele tenha propriedades nomeadas plugins e extends, ambas de matriz de tipo. A plugins matriz deve incluir "office-addins" e a extends matriz deve incluir "plugin:office-addins/recommended". Apresentamos um exemplo simples a seguir. Seu arquivo .eslintrc.json pode ter propriedades adicionais e membros adicionais das duas matrizes.

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

  2. Na raiz do projeto, abra o arquivo package.json e certifique-se de que a scripts matriz tenha o membro a seguir.

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

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

    npm run lint

Instalar Script Lab

Script Lab é uma ferramenta para prototipar rapidamente o código que chama as APIs da Biblioteca JavaScript do Office. Script Lab é um Suplemento do Office e pode ser instalado do AppSource em Script Lab. Há uma versão para Excel, PowerPoint e Word e uma versão separada para o Outlook. Para obter informações sobre como usar Script Lab, consulte Explorar a API JavaScript do Office usando Script Lab.

Observação

A partir da versão 115 de navegadores baseados em Chromium, como Chrome e Edge, a partição de armazenamento está sendo testada para impedir o rastreamento entre sites de canal lateral específico (consulte também políticas de navegador do Microsoft Edge). Essa alteração está impedindo que Script Lab snippets sejam executados em Outlook na Web. Para contornar isso, acesse chrome://flags ou edge://flags no navegador e defina o sinalizador Desabilitado de Partição de Armazenamento de Terceiros (#third-armazenamento-particionamento).

Próximas etapas

Tente criar seu próprio suplemento ou usar 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ê já concluiu um início rápido e deseja criar um suplemento um pouco mais complexo, experiente o 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