COMPUTACIÓN EN EL CLIENTE WEB CREACIÓN DE UNA EXTENSIÓN PARA VISUAL STUDIO CODE

MÁSTER UNIVERSITARIO EN INGENIERÍA EN SOFTWARE Y SISTEMAS INFORMÁTICOS

[pic 1]

COMPUTACIÓN EN EL CLIENTE WEB

CREACIÓN DE UNA EXTENSIÓN PARA VISUAL STUDIO CODE

JAVIER ALEJANDRO VALLEJO BERMEO

ISMAEL SAGREDO OLIVENZA

PER1076-2019-2020

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

Objetivos

• Crear una extensión para Visual Studio Code, cuya funcionalidad es la de insertar una línea en blanco cada N líneas.
• Practicar la programación en JavaScript y aplicarlo en la creación de la extensión.
• Entender TypeScript y trabajar con esta tecnología moderna para el desarrollo web.

Introducción

Para la creación de la extensión, se usará herramientas tecnológicas que están en tendencia, dichas herramientas son multiplataforma, permitiendo a los desarrolladores que el software desarrollado funciones en cualquier plataforma.

El lenguaje de programación que se usa para la creación de la extensión en TypeScript que “es un lenguaje de programación libre y de código abierto desarrollado y mantenido por Microsoft. Es un super conjunto de JavaScript, que esencialmente añade tipos estáticos y objetos basados en clases” (Wikipedia, 2019).

Las herramientas usadas para la creación de la extensión son:

• Microsoft (2019) define que VS Code

“Es un editor de código fuente ligero pero potente que se ejecuta en su escritorio y está disponible para Windows, macOS y Linux. Viene con soporte incorporado para JavaScript, TypeScript y Node.js y tiene un rico ecosistema de extensiones para otros lenguajes (como C ++, C #, Java, Python, PHP, Go) y tiempos de ejecución (como .NET y Unity)”. (párr..1).

• Yeoman según su definición: “Yeoman es un sistema de andamios genérico que permite la creación de cualquier tipo de aplicación. Permite comenzar rápidamente en nuevos proyectos y agiliza el mantenimiento de los proyectos existentes.” (Yeoman, s.f.).
• Node.js es un entorno de ejecución de JavaScript que se construyó en el motor V8 de Chrome, Los creadores de esta herramienta dicen que “es un entorno de ejecución de JavaScript orientado a eventos asíncronos, Node.js está diseñado para construir aplicaciones en red escalables” (Node.js, s.f.)

Ejecución de la actividad

Generación de la estructura del proyecto

Para la generación de la estructura del proyecto realizamos lo siguiente:

1. Abrimos la terminal de VS Code, desde la pestaña Terminal seleccionamos Nueva Terminal.

Figure 1Terminal VS Code

[pic 2]

Fuente: Elaboración propia. (2019)

1. Para generar la arquitectura del proyecto, en la terminal antes abierta insertamos el comando yo code. El comando yo code le dice al VS Code que use el generator-code que es el generador de extensiones de VS Code, como se muestra en la siguiente imagen:

Figure 2 Comando yo code

[pic 3]

Fuente: Elaboración propia. (2019)

1. Una vez ejecutado el comando anterior, Yeoman hará algunas preguntas. El lenguaje a utilizar es TypeScript, el nombre que asignaremos a la extensión es SaltoLinea, el identificador de la extensión es saltolinea, añadimos una pequeña descripción de la extensión, seleccionamos si se usa un repositorio por ultimo seleccionamos el administrador de paquetes que será npm.

La siguiente imagen muestra cómo termina la configuración de la extensión:

Figure 3 Configuracion Yeoman

[pic 4]

Fuente: Elaboración propia. (2019)

Con esto habremos generado una carpeta con la estructura, base de archivos para la extensión de VS Code. Toda la configuración queda almacenada en el archivo package.json.

1. Abrimos el proyecto desde la opción Abrir del menú Archivo, esto abrirá el proyecto creado para generar la extensión. La imagen muestra la estructura del proyecto.

Figure 4 Estructura Proyecto

[pic 5]

Fuente: Elaboración propia. (2019)

Código de la extensión

El código de la extensión, que genera Yeoman se crea en el fichero extension.ts que se encuentra dentro de la carpeta src. El código genérico que Yeoman coloca automáticamente es un “Hola Mundo”.

El siguiente código muestra la funcionalidad para agregar una línea en blanco cada N líneas, para ayuda se ha comentado cada línea de código:

// Se usa el modo estricto de JavaScript

'use strict';

// se importa los módulos y se añade el alisa Vs Code

import * as vscode from 'vscode';

// Método que se invoca cuando la extensión se activa

// recibe como parámetros un objeto de tipo ExtensionContext

export function activate(context: vscode.ExtensionContext) {

    // Registra el comando definido en el package.json

    // el parametros command de la función registerCommand

       debe ser el   mismo que el definido en el package.json

    let disposable = vscode.commands.registerCommand(

  'extension.saltolinea', () => {

        // Obtiene la instancia del editor de VS Code

...