Creación de una extensión para Visual Studio Code

[pic 1][pic 2][pic 3]

Creación de una extensión para Visual Studio Code.

Alondra Rojas Santillán

UNIVERSIDAD INTERNACIONAL DE LA RIOJA (UNIR)

[pic 4]

Software a instalar

Visual Studio Code (VS Code)

Para este ejercicio haremos uso de este maravilloso editor, personalmente es mi favorito ya que ofrece herramientas muy útiles y es muy intuitivo, en este caso yo ya lo tenía instalado en mi equipo.

[pic 5]

NodeJS + npm

Requerimos este motor de JavaScript para el servidor y el control de repositorio centralizado de software NPM. Procederemos a instalarlos.

[pic 6][pic 7][pic 8]

Tema 3. Actividades[pic 9]

[pic 10]

Paquetes NPM

Yeoman

Esta herramienta nos ayudará a crear proyectos llevando a cabo las mejores prácticas para aplicaciones web.

Generator-code

Es un generador de yeoman, nos ayudará a comenzar la extensión. Procederemos a instalar los paquetes.

[pic 11]

[pic 12]

Ejecución de la actividad

Generación del esqueleto del proyecto

Iniciamos el ejercicio escribiendo el comando yo, y comenzaremos a configurar el proyecto.

[pic 13]

Tema 3. Actividades[pic 14]

[pic 15]

Apertura del proyecto con VS Code

Se abrió la carpeta de la extensión en el editor y este nos propuso instalar ESLint.

[pic 16]

Código de la extensión

Primero se hace un modificación en el archivo tsconfig.json, marcar la opción strict cómo false, esto para que no cause conflicto en el código de la extensión.

[pic 17][pic 18]

Tema 3. Actividades[pic 19]

[pic 20]

Y reemplazamos el código por defecto con el código de la extensión, comentando cada línea especificando su función.

[pic 21]

Tema 3. Actividades[pic 22]

[pic 23]

Funciones y propiedades para extensiones en VS Code

Activation Events: eventos en los que su extensión se activa.

Los eventos de activación son un conjunto de declaraciones JSON que realiza en el activationEventscampo del package.json manifiesto de extensión. Su extensión se activa cuando ocurre el Evento de activación. Aquí hay una lista de todos los eventos de activación disponibles.

• onLanguage: Este evento de activación se emite y las extensiones interesadas se activarán cada vez que se abra un archivo que se resuelva en un determinado idioma.
• onCommand: Este evento de activación se emite y las extensiones interesadas se activarán siempre que se invoque un comando.
• onDebug: Este evento de activación se emite y las extensiones interesadas se activarán antes de que se inicie una sesión de depuración.

• onDebugInitialConfigurations
• onDebugResolve

• workspaceContains: Este evento de activación se emite y las extensiones interesadas se activarán siempre que se abra una carpeta y la carpeta contenga al menos un archivo que coincida con un patrón global.
• onFileSystem: Este evento de activación se emite y las extensiones interesadas se activarán cada vez que se lea un archivo o carpeta de un esquema específico. Por lo general, este es el file esquema, pero con los proveedores de sistemas de archivos personalizados se implementan más esquemas, por ejemplo, ftpo ssh.
• onView: Este evento de activación se emite y las extensiones interesadas se activarán cada vez que se expanda una vista de la identificación especificada en la barra lateral de VS Code (Extensiones o Control de código fuente son ejemplos de vistas integradas).

El evento de activación a continuación se activará cada vez que se vea una vista con la nodeDependenciesidentificación:

Tema 3. Actividades[pic 24]

[pic 25]

• onUri: Este evento de activación se emite y las extensiones interesadas se activarán cada vez que se abra un Uri de todo el sistema para esa extensión. El esquema Uri se fija en vscode o vscode-insiders. La autoridad Uri debe ser el identificador de la extensión. El resto del Uri es arbitrario.
• onWebviewPanel: Este evento de activación se emite y las extensiones interesadas se activarán cada vez que VS Code necesite restaurar una vista web con el archivo viewType.
• onCustomEditor: Este evento de activación se emite y las extensiones interesadas se activarán cada vez que VS Code necesite crear un editor personalizado con el archivo viewType.
• onAuthenticationRequest: Este evento de activación se emite y las extensiones interesadas se activarán siempre que una extensión solicite     una      sesión      de      autenticación      (a      través      de la authentication.getSession()API) con el archivo providerId.
• onStartupFinished: Este evento de activación se emite y las extensiones interesadas se activarán algún tiempo después de que se inicie VS Code. Esto es similar al *evento de activación, pero no ralentizará el inicio de VS Code. Actualmente, este evento se emite después de que todas las *extensiones activadas hayan terminado de activarse.
• *: Se * emite el evento de activación y las extensiones interesadas se activarán cada vez que se inicie VS Code.

Deactivate: deactivate le da la oportunidad de limpiar antes de que su extensión se desactive. Para muchas extensiones, es posible que no se requiera una limpieza explícita y el deactivate método se puede eliminar. Sin embargo, si una extensión necesita realizar una operación cuando VS Code se está cerrando o la extensión está deshabilitada o desinstalada, este es el método para hacerlo.

...