Asignatura Datos del alumno Fecha

Computación en el Cliente Apellidos: Mendoza Ramírez

15-11-2022
Web Nombre: Yang

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

Code
Alumno: YANG MENDOZA RAMIREZ
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

1.- OBJETIVO GENERAL

• Crear una extensión pata el conocido editor de texto de Microsoft, Visual Studio Code.

2.- OBJETIVOS ESPECÍFICOS

• Practicar la programación en Javascript (y conocer de paso TypeScript)

• Conocer el uso de las extensiones de Visual Studio Code
• Comprobar el uso de la extensión creada

3.- INSTALACIÓN DE YEOMAN Y GENERATOR-CODE

Para instalar ambos paquetes se abre el Windows PowerShell y se ejecuta la siguiente instrucción:

npm install -g yo generator-code typescript

En esta línea, npm es el manejador de paquetes Javascript Node, install es el comando a ejecutar, -g indica
que la instalación debe realizarla de manera global para poder tener acceso a ella desde cualquier proyecto.

La imagen N° 1 muestra el inicio de la instalación:

IMAGEN N° 1

Al término de la instalación apareció una pantalla de bienvenida a Visual Studio Code Extension generator,
asimismo, una lista de opciones para elegir el tipo de extensión que se quiere crear.

De acuerdo a lo indicado en la especificación de la tarea, se eligió New Extension (TypeScript), como puede
verse en la imagen N° 2.
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

IMAGEN N° 2

Luego de elegir New Extension TypeScript, se especificó lo siguiente:

• El nombre de la extensión: Line Gapper (especificado en la tarea)

• Un identificador de la extensión: gapline (especificado en la tarea)
• La descripción de la extensión: Tarea (criterio propio)
• Va iniciar un repositorio Git?: No (especificado en la tarea)
• Empacará el código fuente con webpack?: No (especificado en la tarea)
• Qué gestor de paquetes usas: npm (criterio propio)

Luego de ingresar las especificaciones, el programa realiza unos cambios (instalaciones) en package.json
como puede verse en la imagen N° 3.
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

IMAGEN N° 3

Al término de la instalación el programa indica que la extensión gapline ha sido creada, como puede verse
en la imagen N° 4

IMAGEN N° 4
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

Finalmente, se ejecutó Visual Studio Code utilizando el comando code gapline. Al abrir el VS Code
automáticamente reconoce la extensión creada como puede verse en la imagen N° 5

IMAGEN N° 5

Luego de instalar algunos componentes propuestos por defecto por VS Code, se cerró el editor y se volvió a
abrir para abrir la carpeta del proyecto como puede verse en la imagen N° 6.

IMAGEN N° 6
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

Al abrir la carpeta del proyecto extensión.ts el generador de Yeoman muestra un código genérico, el
conocido “Hola Mundo” como puede verse en la imagen N° 7

IMAGEN N° 7

4.- CONFIGURACIÓN DE LOS ARCHIVOS NECESARIOS PARA EL PROYECTO

Antes de pasar a la codificación del proyecto es necesario configurar el archivo tsconfig.json. En este caso al
abrir el archivo tsconfig.json se observa que la línea 11 indica “strict”: true, como puede verse en la imagen
N° 8:

IMAGEN N° 8
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

De acuerdo a las especificaciones de la tarea, en esta línea 11 debe estar marcado como false, por lo tanto
se hizo el cambio respectivo como puede verse en la imagen N° 9

IMAGEN N° 9
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

5.- CODIFICACIÓN DE LA EXTENSIÓN

A continuación, se presenta la codificación de la extensión (extensión.ts) que reemplaza al código del Hello World que aparecía por defecto, asimismo, se ha
insertado los respectivos comentarios:

// Invoca el modo estricto de javascript que no permite utilizar variables no declaradas

'use strict';

// Se importa el modulo y lo referencia con el alias vscode

import * as vscode from 'vscode';

// Este método se invoca cuando la extensión se activa

// La extensión se activa la primera vez que el comando se ejecuta
export function activate(context: vscode.ExtensionContext) {

// Implementa la funcionalidad del comando definido en package.json

// El parámetro debe ser igual al nombre de comando en el archivo package.json es decir: gapline.gapline
let disposable = vscode.commands.registerCommand('gapline.gapline', () => {

// Obtiene la instancia de VS Code que se esta ejecutando actualmente

var editor = vscode.window.activeTextEditor;

// Si no encuentra el editor retorna sin hacer nada

if (!editor) { return; }

// Obtiene el bloque de texto seleccionado del editor en curso

var selection = editor.selection;
var text = editor.document.getText(selection);
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

// Muestra un cuadro de dialogo con la palabra: Lineas?

// Pide el número de líneas a considerar para insertar una línea en blanco
vscode.window.showInputBox({ prompt: 'Lineas?' }).then(value => {

// Asigna el valor del cuadro de texto que se asigno a la variable numberOfLines

let numberOfLines = +value;

// Define un array vacío sin cadena de texto

var textInChunks: Array<string> = [];

// Separa el texto a partir de cada salto de línea en un array para iterarlas

// Implementa la funcionalidad que añade las líneas en blanco especificadas
text.split('\n').forEach((currentLine: string, lineIndex) => {

// Añade 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 vacío al array
if ((lineIndex+1) % numberOfLines === 0) textInChunks.push('');
});

// Junta cada parte del array en un solo texto con un salto de línea
text = textInChunks.join('\n');

// 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(
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

// 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 con el nuevo texto todo lo que está en el rango definido
editBuilder.replace(range, text);
});
});
});
// Agrega a una lista de desechables que se eliminan cuando la extensión está desactivada
context.subscriptions.push(disposable);
}
// Cuando la extensión se desactiva este método es invocado
export function deactivate() { }
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

6.- DESCRIPCIÓN DE LAS FUNCIONALIDADES DE INTERÉS DEL CÓDIGO

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

• onLanguage
• onCommand
• onDebug
o onDebugInitialConfigurations
o onDebugResolve
• workspaceContains
• onFileSystem
• onView
• onUri
• onWebviewPanel
• onCustomEditor
• onAuthenticationRequest
• onStartupFinished
• *

Una extensión debe exportar una activate()función desde su módulo principal y VS Code la invocará solo una
vez cuando se emita cualquiera de los eventos de activación especificados. Además, una
extensión debe exportar una deactivate()función desde su módulo principal para realizar tareas de limpieza
en el cierre de VS Code. La extensión debe devolver una Promesa deactivate() si el proceso de limpieza es
asíncrono. Una extensión puede retornar si la limpieza se ejecuta sincrónicamente undefined.deactivate().

7.- PRUEBA DE LA EXTENSIÓN

Para poder probar la extensión primero nos hemos asegurado de sustituir en el fichero package.json todos
los helloworld por el nombre de la función gapline. El fichero package.json contiene la información básica de
nuestra extensión y, entre otras cosas, como ejecutarla.

La imagen N° 10 muestra el contenido del fichero package.json luego de haber reemplazado con el nombre
de la función gapline.
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

IMAGEN N° 10

Finalmente, se ejecutó la extensión con F5 y se abrió una nueva ventana tal como se muestra en la figura
11

IMAGEN N° 11

Luego, abrimos un texto cualquiera lo seleccionamos y al presionar Ctrl + Shift + P sale una ventana donde
nos pide colocar el nombre de la extensión que estamos buscando, en este caso colocamos gapline, tal como
lo muestra la imagen N° 12
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

IMAGEN N° 12

Al colocar gapline le damos enter y nos muestra una ventana donde nos pide colocar el número de líneas
de texto después de las cuales se insertará una línea en blanco como se ve en la imagen N° 13

IMAGEN N° 13
 Asignatura Datos del alumno Fecha
Computación en el Cliente Apellidos: Mendoza Ramírez
15-11-2022
Web Nombre: Yang

Para nuestra prueba se ha colocado el número 3 y se ha dado enter, por lo tanto nos debe insertar una
línea en blanco cada 3 líneas de texto como puede verse en la imagen N° 14

IMAGEN N° 14