Está en la página 1de 12

Asignatura Datos del alumno Fecha

Apellidos: Cudco Pomagualli


Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

Creación de una extensión para Visual


Studio Code
1. Instalación de componentes

1.1. Descarga e Instalación de Node Js

Para esta actividad se debe ingresar a la siguiente dirección:


https://nodejs.org/en/download/current/ y descargar la versión de Node.js
compatible con el sistema operativo de nuestro equipo.

Figura 1. Sección de descargas de Node.js de la página oficial.

Figura 2. Instalador de Node.js para sistemas Windows de 64 bits.

Figura 3. Inicialización del Asistente de instalación de Node.js

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

Figura 4. Términos y condiciones de uso de Node.js

Figura 5. Destino de la instalación de Node.js

Figura 6. Inicio del proceso de instalación de Node.js

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

Figura 7. Proceso de instalación de Node.js

Figura 8. Instalación completa de node.js

1.2. Instalación de características adicionales a Node.js

Finalizado el proceso de instalación de Node.js, se abrirá un asistente a través del


cual se instalarán módulos adicionales.

La instalación de los módulos es intuitiva como se detalla a continuación.

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

Figura 9. Inicio del proceso de instalación de los módulos adicionales en Node.js

Figura 10. Proceso de instalación de los módulos adicionales en Node.js

1.3. Instalación de Yeoman y Generator-code

Para instalar estos dos paquetes, se ejecuta la siguiente instrucción en un terminal:

Figura 11. Instrucción para instalar los paquetes Yeoman y Generator-code a través del cmd.

Figura 12. Proceso de instalación de Yeoman y Generator-code

Figura 13. Pantalla que muestra que la instalación de los módulos ha finalizado exitosamente.

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

2. Creación del proyecto

Para la creación de la estructura inicial del proyecto se emplea Yeoman mediante el


comando yo. Para ello se utiliza el terminal del VS Code y se teclea la siguiente
instrucción yo code

Figura 14. Creación de la estructura del proyecto a través de Yeoman

Figura 15. Panel de configuraciones del proyecto.

Figura 16. Datos de las configuraciones del proyecto solicitadas por Yeoman.

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

Figura 17. Proceso de instalación de los paquetes requeridos por Yeoman, para la creación de la estructura del
proyecto.

El proceso de creación de la estructura del proyecto dura unos minutos dependiendo de


la velocidad de internet, al finalizar se muestra una ventana similar a la siguiente:

Figura 18. Pantalla que nos indica que el proyecto ha sido creado exitosamente.

Al crear el proyecto automáticamente se crea un directorio con todo el código del


proyecto.

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

Figura 19. Archivos del proyecto vistos desde el explorador del equipo.

Figura 20. Archivos del proyecto vistos desde el explorador de carpetas de VS Code.

3. Código de la Extensión

Yeoman crea el archivo package.json que contiene la información del proyecto.

Figura 21. Código fuente del fichero package.json

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

De forma similar se crea un fichero de nombre extension.ts dentro de la carpeta src, que
inicialmente tiene un código genérico ¡Hola Mundo!

Figura 22. Código fuente del fichero extension.ts

4. Edición de los ficheros

4.1. Ejercicio 1

A continuación, se sustituye el código fuente del fichero extensión.ts, por el código de


la extensión “Line Gapper”, además se comenta cada línea de código de acuerdo a su
función.

'use strict'; //Invoca el mode estricto de javascript

// Importa el módulo y lo referencia con el alias vscode


import * as vscode from 'vscode';

// El método activate es llamado cuando la extensión es activada

// La extensión es activada la primera vez que se ejecuta el comando


export function activate(context: vscode.ExtensionContext) {
// Implementa la funcionalidad de los comandos definidos en el fichero
package.json

// El parámetro commandId debe ser igual al nombre de comando en


package.json

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

let disposable = vscode.commands.registerCommand('extension.gapline',


() => {

// Busca la instancia de VS Code que actualmente se encuentra en


ejecución
var editor = vscode.window.activeTextEditor;

// En caso de no encontrar el editor retorna sin hacer nada


if (!editor) { return; }

// Obtiene el bloque de texto seleccionado del editor actual


var selection = editor.selection;
var text = editor.document.getText(selection);

// Muestra un cuadro de díalogo

/* Pide el número de líneas en blanco a ser insertadas,


posteriormente
implementa la funcionalidad con el valor obtenido*/

vscode.window.showInputBox({ prompt: 'Lineas?' }).then(value => {


// Asigna el valor obtenido en el cuadro de texto a la variable
numberOfLines convirtiendole a entero
var numberOfLines = +value;

// Se define un array vacio de cadenas de texto


var textInChunks: Array<string> = [];

// Divide el texto a partir de cada salto de línea en un array


para iterarlas
// Implementa la funcionalidad que agrega las líneas en blanco
text.split('\n').forEach((currentLine: string, lineIndex) => {
// Agrega la línea actual al array textInChuncks
textInChunks.push(currentLine);
// Verifica si la posición en la que está corresponde al
número de líneas
// Si cumple ingresa un texto vacio al array
if ((lineIndex+1) % numberOfLines === 0) {
textInChunks.push(''); }
});

// Une cada item de array en un solo texto con un salto de


línea
text = textInChunks.join('\n');

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

// Implementa la funcionalidad para editar el texto


seleccionado
editor.edit((editBuilder) => {
// Genera un rango tomando en cuenta los parámetros de la
selección
var range = new vscode.Range(
// Número inicial de línea y columna
selection.start.line, 0,
// Número final de línea
selection.end.line,
// Número final de columna
editor.document.lineAt(selection.end.line).text.length
);

// Reemplaza todo lo que está en el rango antes definido


con el nuevo texto
editBuilder.replace(range, text);
});
});
});

//Agrega a una lista de desechables que se eliminan cuando la extensión


está desactivada.
context.subscriptions.push(disposable);
}

// Este método es ejecutado cuando la extensión se desactiva


export function deactivate() {
}

4.2. Ejercicio 2

a. Modificación del fichero package.json

En este fichero se debe reemplazar sayHello por el por el nombre de la función que
estamos usando en este caso gapline.

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

Figura 23. Código fuente del fichero package.json

b. Ejecución de la extensión

Para ejecutar la extensión seleccionamos la opción de menú Start debugging del


menú Debug, posteriormente se abre una nueva ventana de VS Code que ya tiene tu
extensión precargada.

Figura 24. Inicio del proceso de depuración del proyecto.

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)


Asignatura Datos del alumno Fecha
Apellidos: Cudco Pomagualli
Computación en el
13-12-2018
Cliente Web
Nombre: Angel Geovanny

c. Ejecución de la extensión con un ejemplo

Abrimos un fichero de texto cualquiera, seleccionamos su contenido, posteriormente


seleccionamos la opción Ver->Paleta de Comandos y se abrirá el visor de comandos
de VS Code. Buscamos el nombre de la extensión creada que tiene el mismo nombre del
campo Display Name en el fichero package.json

Figura 25. Extensión Line Gapper creada recientemente.

Al seleccionar la extensión inmediatamente se muestra un diálogo donde nos pide el


número de líneas, en este caso he introducido el número dos y presionamos Enter.

Figura 26. Diálogo a través del cual se pide ingresar el número de líneas a insertar.

La extensión realiza su cometido y observamos que cada dos líneas la extensión ha


inserta una en blanco, demostrando así que el código funciona correctamente.

Figura 27. Funcionamiento de la extensión Line Gapper.

TEMA 2 – Actividades © Universidad Internacional de La Rioja (UNIR)

También podría gustarte