Defina seu ambiente de desenvolvimento

  • Artigo

Este guia ajuda-o a configurar ferramentas para que possa criar Suplementos do Office ao seguir os nossos inícios rápidos ou tutoriais. Se já os tiver instalados, está pronto para começar rapidamente, como este guia de introdução do Excel React.

Obter o Microsoft 365

Precisa de uma conta do Microsoft 365. Pode qualificar-se para uma subscrição de programador do Microsoft 365 E5, que inclui todas as aplicações do Office, através do Programa para Programadores do Microsoft 365; para obter detalhes, veja as FAQ. Em alternativa, pode inscrever-se numa avaliação gratuita de um mês ou comprar um plano do Microsoft 365.

Instalar o ambiente

Existem dois tipos de ambientes de desenvolvimento à escolha. Os andaimes dos projetos de Suplemento do Office criados nos dois ambientes são diferentes, pelo que, se várias pessoas estiverem a trabalhar num projeto de suplemento, todas têm de utilizar o mesmo ambiente.

  • Node.js ambiente: recomendado. Neste ambiente, as suas ferramentas são instaladas e executadas numa linha de comandos. O lado do servidor da parte da aplicação Web do suplemento é escrito em JavaScript ou TypeScript e está alojado num runtime Node.js. Existem muitas ferramentas de desenvolvimento de suplementos úteis neste ambiente, como um linter do Office e um bundler/task-runner chamado WebPack. Existem duas ferramentas de criação e estruturação de projetos que pode escolher: uma ferramenta de linha de comandos denominada Gerador Yeoman do Office (também denominada "Yo Office") e uma extensão do Visual Studio Code denominada Teams Toolkit.
  • Ambiente do Visual Studio: selecione este ambiente apenas se o seu computador de desenvolvimento for o Windows e quiser desenvolver o lado do servidor do suplemento com uma linguagem e arquitetura baseadas em .NET, como ASP.NET. Os modelos de projeto de suplemento no Visual Studio não são atualizados com tanta frequência como os do ambiente Node.js. Mais informações mais tarde no separador ambiente do Visual Studio .

Observação

O Visual Studio para Mac não inclui os modelos de estruturação do projeto para Suplementos do Office, por isso, se o seu computador de desenvolvimento for um Mac, deve trabalhar com o ambiente Node.js.

Selecione o separador do ambiente que escolher.

As principais ferramentas a instalar são:

  • Node.js

  • npm

  • Um editor de código à sua escolha

  • Uma ferramenta de criação de projetos:

    • Office Yeoman Generator (Yo Office)
    • Toolkit do Teams (requer o Visual Studio Code)

  • O linter JavaScript do Office

Este guia pressupõe que sabe como utilizar uma ferramenta de linha de comandos.

Instalar Node.js e npm

Node.js é um runtime JavaScript que utiliza para desenvolver Suplementos do Office modernos.

Instale Node.js ao transferir a versão recomendada mais recente a partir do respetivo site. Siga as instruções de instalação do seu sistema operativo.

O npm é um registo de software open source a partir do qual pode transferir os pacotes utilizados no desenvolvimento de Suplementos do Office. Normalmente, é instalado automaticamente quando instala Node.js. Para verificar se já tem o npm instalado e ver a versão instalada, execute o seguinte na linha de comandos.

npm -v

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

npm install npm -g

Dica

Pode querer utilizar um gestor de versões do Node para permitir alternar entre várias versões do Node.js e npm, mas tal não é estritamente necessário. Para obter detalhes sobre como fazê-lo, 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 a web part, como:

Instalar uma ferramenta de criação de projetos

Pode criar projetos de suplemento do Office com o Gerador Yeoman do Office (Yo Office) ou a extensão Do Teams Toolkit para Visual Studio Code.

Instalar o gerador Yeoman — Yo Office

A ferramenta de criação e estruturação de projetos é o gerador Yeoman para Suplementos do Office, carinhosamente conhecido como Yo Office. Tem de 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 o Teams Toolkit

Instale o Visual Studio Code e, em seguida, instale a versão mais recente do Teams Toolkit, conforme descrito em Instalar o Teams Toolkit.

Instalar e utilizar o linter JavaScript do Office

A Microsoft fornece um linter JavaScript para o ajudar a detetar erros comuns ao utilizar a biblioteca JavaScript do Office. Se criar um projeto de suplemento com o gerador Yeoman para Suplementos do Office ou o Teams Toolkit, o linter é instalado e configurado automaticamente. Avance para Executar o linter.

Se tiver criado o projeto manualmente, instale e configure o linter com os seguintes passos.

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

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

  2. Na raiz do projeto, crie um ficheiro de texto com o nome .eslintrc.json, caso ainda não exista um. Certifique-se de que tem propriedades denominadas 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. O ficheiro .eslintrc.json pode ter propriedades adicionais e membros adicionais das duas matrizes.

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

  3. Na raiz do projeto, abra o ficheiro package.json e certifique-se de que 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 numa linha de comandos. Os problemas encontrados pelo linter aparecem no terminal ou na linha de comandos e também aparecem diretamente no código quando está a utilizar um editor que suporta mensagens linter, como o Visual Studio Code.

npm run lint

Instalar o Laboratório de Scripts

O Script Lab é uma ferramenta para criar rapidamente um código de prototipagem que chama as APIs da Biblioteca JavaScript do Office. O Script Lab é, por si só, um Suplemento do Office e pode ser instalado a partir do AppSource no Script Lab. Existe uma versão para o Excel, PowerPoint e Word e uma versão separada para o Outlook. Para obter informações sobre como utilizar o Laboratório de Scripts, consulte Explorar a API JavaScript do Office com o Script Lab.

Observação

A partir da Versão 115 dos browsers baseados no Chromium, como o Chrome e o Edge, a criação de partições de armazenamento está ativada para impedir o controlo de canais laterais específicos entre sites (consulte também políticas do browser Microsoft Edge). Esta alteração está a impedir a execução de fragmentos do Script Lab no Outlook na Web.

Próximas etapas

Experimente criar o seu próprio suplemento ou utilize o Laboratório de Scripts para experimentar exemplos incorporados.

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 concluiu anteriormente um guia de introdução e pretende criar um suplemento ligeiramente mais complexo, deve experimentar 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