Share via

Desarrollar complementos de Office con Visual Studio Code

  • Artículo

Este artículo describe cómo usar Visual Studio Code (VS Code) para desarrollar un complemento de Office.

Nota:

Para obtener información sobre el uso de Visual Studio para crear un complemento de Office, vea Desarrollar complementos de Office con Visual Studio.

Requisitos previos

  • Node.js (la última versión de LTS). Visite el sitio deNode.js para descargar e instalar la versión correcta para el sistema operativo.

  • La versión más reciente de Yeoman y Generador de Yeoman para complementos de Office. Para instalar estas herramientas globalmente, ejecute el siguiente comando desde el símbolo del sistema.

    npm install -g yo generator-office

    Nota:

    Incluso si ya ha instalado el generador Yeoman, recomendamos que actualice el paquete de la versión más reciente desde npm.

  • Office está conectado a una suscripción Microsoft 365 (incluido Office en la Web).

    Nota:

    Si aún no tiene Office, puede calificar para una suscripción de desarrollador Microsoft 365 E5 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.

Crear el proyecto de complemento con el generador Yeoman

Si usa VS Code como entorno de desarrollo integrado (IDE), debe crear el proyecto del complemento de Office con el generador Yeoman para complementos de Office. El generador Yeoman crea un proyecto de Node.js que se puede administrar con VS Code o cualquier otro editor.

Para crear un complemento de Office con el generador Yeoman, siga las instrucciones que se indican en el Inicio rápido de 5 minutos correspondiente al tipo de complemento que quiera crear.

Desarrollar el complemento con VS Code

Cuando el generador Yeoman termine de crear el proyecto del complemento, abra la carpeta raíz del proyecto con VS Code.

Sugerencia

En Windows, puede navegar hasta el directorio raíz del proyecto desde la línea de comandos y, después, puede escribir code . para abrir esa carpeta en VS Code. En un equipo Mac, necesitará agregar el comando code a la ruta de acceso antes de poder usar ese comando para abrir la carpeta de proyecto en VS Code.

El generador Yeoman crea un complemento básico con una funcionalidad limitada. Para personalizar el complemento, edite el manifiesto, HTML, JavaScript o TypeScript, y los archivos CSS en VS Code. Para obtener una descripción detallada de la estructura del proyecto y los archivos del proyecto de complemento que crea el generador Yeoman, vea las instrucciones para el generador Yeoman en el Inicio rápido de 5 minutos correspondiente al tipo de complemento que ha creado.

Ejecutar y depurar el complemento

Los métodos para probar, depurar y solucionar problemas de complementos de Office varían según la plataforma. Para obtener más información, vea Probar y depurar complementos de Office.

Publicar el complemento

Un complemento de Office consta de una aplicación web y un archivo de manifiesto. La aplicación web define la interfaz de usuario y la funcionalidad del complemento, mientras que el manifiesto especifica la ubicación de la aplicación web y define la configuración y las características del complemento.

Cuando desarrolle el complemento, puede ejecutarlo en el servidor web local (localhost), pero cuando esté listo para publicarlo, para que otros usuarios puedan obtener acceso a él, tendrá que implementar la aplicación web en un servidor web o un servicio de hospedaje web (por ejemplo, Microsoft Azure) y actualizar el manifiesto para especificar la dirección URL de la aplicación implementada.

Si el complemento funciona como quiere y está listo para publicarlo para que otros usuarios puedan tener acceso a él, siga los siguientes pasos.

  1. Desde la línea de comandos, en el directorio raíz del proyecto de complemento, ejecute el siguiente comando para preparar todos los archivos a la implementación de producción.

    npm run build

    Al finalizar la compilación, la carpeta dist en el directorio raíz del proyecto de complemento contendrá los archivos que implementará en los siguientes pasos.

  2. Cargue el contenido de la carpeta dist en el servidor web que hospede el complemento. Puede usar cualquier tipo de servidor web o servicio de hospedaje web para hospedar el complemento.

  3. En VS Code, abra el archivo de manifiesto del complemento, ubicado en el directorio raíz del proyecto (manifest.xml). Reemplace todas las repeticiones de https://localhost:3000 por la dirección URL de la aplicación web que ha implementado en un servidor web en el paso anterior.

  4. Elija el método que quiera usar para implementar el complemento de Office y siga las instrucciones para publicar el archivo de manifiesto.

Consulte también