Configurar el entorno de desarrollo

Artículo
02/13/2024

Esta guía le ayuda a configurar herramientas para que pueda crear complementos de Office siguiendo nuestros inicios rápidos o tutoriales. Si ya los tiene instalados, está listo para comenzar un inicio rápido, como este React inicio rápido de Excel.

Obtener Microsoft 365

Necesita una cuenta de Microsoft 365. Puede calificar para una suscripción de desarrollador Microsoft 365 E5, que incluye todas las aplicaciones de Office, a través del Programa para desarrolladores de Microsoft 365; para obtener más información, consulte las preguntas más frecuentes. Como alternativa, puede registrarse para obtener una evaluación gratuita de 1 mes o comprar un plan de Microsoft 365.

Instalación del entorno

Hay dos tipos de entornos de desarrollo entre los que elegir. El scaffolding de los proyectos de complementos de Office que se crean en los dos entornos es diferente, por lo que si varias personas trabajarán en un proyecto de complemento, todos deben usar el mismo entorno.

entornoNode.js: recomendado. En este entorno, las herramientas se instalan y se ejecutan en una línea de comandos. El lado servidor de la parte de la aplicación web del complemento se escribe en JavaScript o TypeScript y se hospeda en un entorno de ejecución de Node.js. Hay muchas herramientas de desarrollo de complementos útiles en este entorno, como un linter de Office y un bundler/task-runner denominado WebPack. La herramienta de creación de proyectos y scaffolding, Yo Office, se actualiza con frecuencia.
Entorno de Visual Studio: elija este entorno solo si el equipo de desarrollo es Windows y quiere desarrollar el lado servidor del complemento con un lenguaje y un marco basados en .NET, como ASP.NET. Las plantillas de proyecto de complemento de Visual Studio no se actualizan con tanta frecuencia como las del entorno de Node.js. El código del lado cliente no se puede depurar con el depurador integrado de Visual Studio, pero puede depurar código del lado cliente con las herramientas de desarrollo del explorador. Más adelante, en la pestaña Entorno de Visual Studio , encontrará más información.

Nota:

Visual Studio para Mac no incluye las plantillas de scaffolding del proyecto para complementos de Office, por lo que si el equipo de desarrollo es un Equipo Mac, debe trabajar con el entorno de Node.js.

Seleccione la pestaña del entorno que elija.

entorno deNode.js
Entorno de Visual Studio

Las herramientas principales que se instalarán son:

Node.js
npm
Editor de código de su elección
Yo Office
Linter de JavaScript de Office

En esta guía se supone que sabe cómo usar una herramienta de línea de comandos.

Instalar Node.js y npm

Node.js es un entorno de ejecución de JavaScript que se usa para desarrollar complementos de Office modernos.

Instale Node.js descargando la versión recomendada más reciente de su sitio web. Siga las instrucciones de instalación del sistema operativo.

npm es un registro de software código abierto desde el que descargar los paquetes utilizados en el desarrollo de complementos de Office. Normalmente se instala automáticamente al instalar Node.js. Para comprobar si ya tiene npm instalado y ver la versión instalada, ejecute lo siguiente en la línea de comandos.

npm -v

Si, por algún motivo, quiere instalarlo manualmente, ejecute lo siguiente en la línea de comandos.

npm install npm -g

Sugerencia

Es posible que desee usar un administrador de versiones de Node para permitirle cambiar entre varias versiones de Node.js y npm, pero esto no es estrictamente necesario. Para obtener más información sobre cómo hacerlo, consulte las instrucciones de npm.

Instalar un editor de código

Puede usar cualquier editor de código o IDE que admita el desarrollo del lado cliente para compilar el elemento web, como:

Instalación del generador de Yeoman: Yo Office

La herramienta de creación de proyectos y scaffolding es generador de Yeoman para complementos de Office, conocido afectuosamente como Yo Office. Debe instalar la versión más reciente de Yeoman y Yo Office. Para instalar estas herramientas globalmente, ejecute el siguiente comando en el símbolo del sistema:

npm install -g yo generator-office

Instalación y uso del linter de JavaScript de Office

Microsoft proporciona un linter de JavaScript para ayudarle a detectar errores comunes al usar la biblioteca de JavaScript de Office. Para instalar linter, ejecute los dos comandos siguientes (después de instalar Node.js y npm).

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

Si crea un proyecto de complemento de Office con la herramienta generador de Yeoman para complementos de Office , el resto de la instalación se realiza automáticamente. Ejecute linter con el siguiente comando en el terminal de un editor, como Visual Studio Code, o en un símbolo del sistema. Los problemas detectados por linter aparecen en el terminal o en el símbolo del sistema, y también aparecen directamente en el código cuando se usa un editor que admite mensajes linter, como Visual Studio Code. (Para obtener información sobre cómo instalar el generador de Yeoman, vea Generador de Yeoman para complementos de Office).

npm run lint

Si el proyecto de complemento se creó de otra manera, siga estos pasos.

En la raíz del proyecto, cree un archivo de texto denominado .eslintrc.json, si aún no hay uno. Asegúrese de que tiene propiedades denominadas plugins y extends, ambas de la matriz de tipos. La plugins matriz debe incluir "office-addins" y la extends matriz debe incluir "plugin:office-addins/recommended". A continuación puede ver un ejemplo simple. El archivo .eslintrc.json puede tener propiedades adicionales y miembros adicionales de las dos matrices.
```
{
  "plugins": [
    "office-addins"
  ],
  "extends": [
    "plugin:office-addins/recommended"
  ]
}
```
En la raíz del proyecto, abra el archivo package.json y asegúrese de que la scripts matriz tiene el siguiente miembro.
```
"lint": "office-addin-lint check",
```
Ejecute linter con el siguiente comando en el terminal de un editor, como Visual Studio Code, o en un símbolo del sistema. Los problemas detectados por linter aparecen en el terminal o en el símbolo del sistema, y también aparecen directamente en el código cuando se usa un editor que admite mensajes linter, como Visual Studio Code.
```
npm run lint
```

Instalar Script Lab

Script Lab es una herramienta para crear rápidamente prototipos de código que llama a las API de biblioteca de JavaScript de Office. Script Lab es en sí mismo un complemento de Office y se puede instalar desde AppSource en Script Lab. Hay una versión para Excel, PowerPoint y Word, y una versión independiente para Outlook. Para obtener información sobre cómo usar Script Lab, consulte Exploración de la API de JavaScript de Office mediante Script Lab.

Nota:

A partir de la versión 115 de los exploradores basados en Chromium, como Chrome y Edge, se está probando la creación de particiones de almacenamiento para evitar el seguimiento entre sitios de canal lateral específico (consulte también las directivas del explorador Microsoft Edge). Este cambio impide que Script Lab fragmentos de código se ejecuten en Outlook en la Web. Para solucionarlo, vaya a chrome://flags o edge://flags en el explorador y, a continuación, establezca la marca Partición de almacenamiento de terceros (#third-entidad-almacenamiento-partición) en Deshabilitado.

Siguientes pasos

Pruebe a crear su propio complemento o use Script Lab para probar ejemplos integrados.

Crear un complemento para Office

Puede crear rápidamente un complemento básico para Excel, OneNote, Outlook, PowerPoint, Project o Word siguiendo el inicio rápido de 5 minutos. Si ya ha completado el inicio rápido y desea crear un complemento algo más elaborado, pruebe a usar el tutorial.

Explorar las API con Script Lab

Explore la biblioteca de ejemplos integrados en Script Lab para tener una idea de lo que las API de JavaScript para Office son capaces de hacer.