Sunteți pe pagina 1din 12

Asignatura Datos del alumno Fecha

Computación en el Apellidos: Marquina LLivisaca


24/03/19
Cliente Web Nombre: Edgar Marquina

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

Objetivos y descripción

 Es crear una extensión para el conocidísimo editor de texto de


Microsoft: Visual Studio Code, donde está extensión va a insertar una
línea en blanco cada N líneas.

Desarrollo de la creación de una extensión para Visual Studio Code

1. Instalamos Visual Studio Code (VS Code), como editor desde su página
oficial 1, como se observa en la imagen 1.

Imagen 1: Página Oficial

2. Instalamos Node (o NodeJS), desde su página oficial 2, Node es un motor


JavaScript para el servidor, a través de su repositorio centralizado de
software: NPM, como se observa en la imagen 2.
© Universidad Internacional de La Rioja (UNIR)

1
Url:https://code.visualstudio.com/#alt-downloads.
2
Url:https://nodejs.org/en/download/current/

Tema 3. Actividades 1
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

Imagen 2: Página Oficial

3. Ve a la página de descarga de Node e instala la versión pertinente para tu


sistema operativo, como se observa en la imagen 3.

Imagen 3: Página Oficial

4. Una vez instalado Node, accedemos a su ubicación donde se aloja NPM,


desde una terminal de comandos “Command Prompt”, como se observa
en la imagen 4.
© Universidad Internacional de La Rioja (UNIR)

Imagen 4: Acceso a NPM

Tema 3. Actividades 2
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

5. Para instalar ambos paquetes: “Yeoaman” y “TypeScript”, ejecuta la


siguiente instrucción en un terminal: npm install -g o generator-code
typescript, como se observa en la imagen 5.

Imagen 5: Instalación de Yeoaman y TypeScript

6. Una vez instalado Yeoaman, que no es más que un generador del


esqueleto inicial de extensiones para VS Code, en el cual con la instrucción
“yo code”, le indicando a Yeoman que queremos usar el generador de
extensiones para VS Code (que hemos instalado previamente y el paquete
generator-code). Al ejecutar este comando, Yeoman nos hará varias
preguntas para configurar nuestro proyecto, como se visualiza en la
siguiente imagen 6.
© Universidad Internacional de La Rioja (UNIR)

Imagen 6: Instalación de esqueleto del proyecto con Yeoman

Tema 3. Actividades 3
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

7. Todas estas opciones quedan registradas en el fichero package.json,


como se visualiza a continuación, como se visualiza en la imagen 7.

Imagen 7: Fichero package.json.

8. Además, Yeoman, genera una carpeta de trabajo con otros archivos y


subcarpetas, como se visualiza en la imagen 8.
© Universidad Internacional de La Rioja (UNIR)

Imagen 8: Carpeta de trabajo

Tema 3. Actividades 4
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

9. A continuación, se ejecuta el VS Code, y se abre la carpeta que contiene


el proyecto “gapLine”, como se visualiza en la imagen 9.

Imagen 9: Carpeta del proyecto.

10. Una vez abierto el proyecto se realizará la modificación del fichero


extension.ts, el de defecto que nos instala Yeoman, por el siguiente código,
teniendo que modificar en la línea 15 que toca cerrar los paréntesis, como
también en la línea 26 poner punto y coma, como se visualiza en la imagen
10.
© Universidad Internacional de La Rioja (UNIR)

Imagen 10: Archivo extensión.ts.

Tema 3. Actividades 5
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

11. A continuación, se describe el concepto de las Funciones: “activa”, que


su objetivo es proporcionar a la API a otras extensiones, devolviendo su
contenido público de API desde su llamada de activación, como también
se puede definir que una función “deactivate”, cuyo objetivo es desactivar
a la o todas las extensiones, otras funciones a mencionar son las
siguientes:
 addBreakpoints(breakpoints: Breakpoint[]): void
 registerDebugAdapterDescriptorFDisposable
 registerDebugAdapterTrackerFactory(debugType: string,
factory: DebugAdapterTrackerFactory): Disposable
 actory(debugType: string, factory: DebugAdapterDescrip
torFactory):
 registerDebugConfigurationProvider(debugType: string,
provider: DebugConfigurationProvider): Disposable
 removeBreakpoints(breakpoints: Breakpoint[]): void
 startDebugging(folder: WorkspaceFolder | undefined, na
meOrConfiguration: string | DebugConfiguration): Thena
ble<boolean>
 Event - Eventos. - Los eventos en la API de VS Code, exponen como
funciones a las que llama con una función de escucha para
suscribirse. Las llamadas para suscribirse devuelven un comando
“Disposable”, que elimina el detector de eventos al desechar.

o Por ejemplo: “window.onDidChangeActiveTextEditor”, que es un


evento que se activa cuando el editor de texto está
activo (sustantivo), ha sido cambiado ( onDid ) ( verbo ), otros
eventos son los siguientes:

 onDidChangeActiveDebugSession: Event<DebugSessio
© Universidad Internacional de La Rioja (UNIR)

n | undefined>
 onDidChangeBreakpoints: Event<BreakpointsChangeEv
ent>
 onDidReceiveDebugSessionCustomEvent: Event<Debu
gSessionCustomEvent>
 onDidStartDebugSession: Event<DebugSession>

Tema 3. Actividades 6
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

 onDidTerminateDebugSession: Event<DebugSession>

 Disposable - Desechables.- La API de VS Code utiliza el patrón de


disposición3, que es patrón diseñado para la gestión de recursos de VS
Code, aplicando a la escucha de eventos, a los comandos, a la
interacción con la interfaz de usuario y a varias contribuciones de
idiomas.

o Por ejemplo: “setStatusBarMessage(value: string)”, función que


devuelve un “Disposable”, que al llamarlo elimina el mensaje
nuevamente.

 Strict null - Estricta nula. - La API de VS Code, implementa


“strictNullChecks”, para la comprobación de tipos de datos indefinidos
o nulos.

 Debug – Depurar. - Es una funcionalidad de depuración, como los


observa en a continuación:

 activeDebugConsole : DebugConsole
 activeDebugSession : DebugSession | indefinido
 puntos de interrupción : punto de interrupción []

Código interpretado
© Universidad Internacional de La Rioja (UNIR)

//Usa el modo estricto de javascript


'use strict';
// Se importa todo desde la librería vscode, y se pone como alias el // nombre [vscode].
import * as vscode from 'vscode';

3
Url: https://en.wikipedia.org/wiki/Dispose_pattern

Tema 3. Actividades 7
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

// Este método se llama cuando su extensión está activa, y se activa --// la primera vez que se ejecuta
el comando.
export function activate(context: vscode.ExtensionContext) {
// Se reasigna la variable "disposable" y se inicializa, como también implementa
// la funcionalidad del comando definido en package.json
let disposable = vscode.commands.registerCommand('extension.gapline', () => {
// Se define una variable "editor", para obtener la instancia de VS Code
// que se está ejecutando actualmente
var editor = vscode.window.activeTextEditor;
// Un condicionante que si editor es false retorna sin hacer nada
if (!editor) { return; }
// Cuando se selecciona el Texto del archivo a ser modificado
var selection = editor.selection;
// Se define la variable para obtener el texto de lo que se seleccionó.
var text = editor.document.getText(selection);
//Se muestra un dialogo, para ingresar el número de líneas,
//para inserta n línea en blanco
vscode.window.showInputBox({ prompt: 'Lineas?' }).then(value => {
// Se reasigna el valor incremental de las líneas a la variable "numberOfLines"
let numberOfLines = +value;
// Se crea una variable y se le asigna un Arreglo de cadenas de texto
var textInChunks: Array<string> = [];
//Se utiliza la función "split", para obtener dentro de un bucle
//cada una de las lineas, separadas por un salto de líneas '\n'
text.split('\n').forEach((currentLine: string, lineIndex) => {
//Agrega la línea actual al arreglo textInChunks
textInChunks.push(currentLine);
//Verifica si la posición actual corresponde al número de lineas,
//si cumple ingresa un texto vacío al arreglo
if ((lineIndex+1) % numberOfLines === 0) { textInChunks.push(''); }
});
//Junta cada registro del arreglo en un solo texto con un salto de línea
text = textInChunks.join('\n');
//Se edita o modifica el texto seleccionado
editor.edit((editBuilder) => {
© Universidad Internacional de La Rioja (UNIR)

// Se crea un rango y se asigna a una variable


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,

Tema 3. Actividades 8
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

// Número final de columna del texto seleccionado con su tamaño


editor.document.lineAt(selection.end.line).text.length
);
// Remplazo todo el texto que está en el rango, 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 se llama cuando su extensión está desactivada
export function deactivate() { }

12. Como también toca agregar a la configuración del archivo tsconfig.json, la


opción “strict” marcar como “false”. Si no estuviera hay que añadirla, con
el objetivo de deshabilitar todas las opciones estrictas de comprobación de
tipo, también se debe agregar la parametrización del chequeo estricto de
valores nulos en "compilerOptions": { "strictNullChecks": false } , como se
visualiza en la imagen 11.
© Universidad Internacional de La Rioja (UNIR)

Imagen 11: Archivo tsconfig.json.

13. A continuación, se procede con la configuración del archivo


“package.json”, en el cual el campo contributes -> commands -> title, los

Tema 3. Actividades 9
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

cuales se crearon con el generador de Yeoman, considerando que cuando


se ejecute el programa o la extensión desde “Paletas de comando”, o
Ctrl+Shift+P, se deberá llamar por el “Title”, que en este caso es “Trabajo
3”, como se visualiza en la imagen 12.

Imagen 12: Archivo package.json modificación.

14. Para ejecutar el programa, se dirige al menú en la opción Debug->Star


Debugging o F5, como se visualiza en la imagen 13.
© Universidad Internacional de La Rioja (UNIR)

Imagen 13: Ejecutar programa.

Tema 3. Actividades 10
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

15. A continuación, se nos presenta la siguiente pantalla donde vamos a abrir


un archivo cualquier de testo, desde algún lugar de nuestra computadora,
dicho archivo contiene cuatro líneas las cuales, van a ser afectadas e
insertadas unas líneas en blanco cada N líneas, según el número que se
ingrese en el dialogo del presente programa, como se visualiza en las
imágenes 14 y 15.

Imagen 14: Archivo a modificar.

Imagen 15: Abrir el archivo a modificar.

16. Una vez abierto el archivo, se nos visualiza en pantalla, las líneas que
© Universidad Internacional de La Rioja (UNIR)

contiene el archivo, a continuación, se presiona Ctrl+Shift+P, para


seleccionar el nombre “Trabajo 3, de la extensión que previamente
habíamos configurado en: contributes -> commands -> title en el fichero
package.json, como se visualiza en la imagen 16.

Tema 3. Actividades 11
Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca
24/03/19
Cliente Web Nombre: Edgar Marquina

Imagen 16: Seleccionar la extensión a ejecutar.

17. Una vez que seleccionamos el nombre de la extensión, se nos presenta


un nuevo cuadro de diálogo preguntándote cada cuántas líneas quieres
insertar: una línea en blanco (o el texto que hayas puesto en la propiedad
prompt del código anterior). Selecciona un número apropiado y pulsa intro.
Verás cómo el texto seleccionado es sustituido por uno nuevo, pero que
contiene líneas en blanco, como se visualiza en la imagen 17 y 18.

Imagen 17: Ingreso de número de líneas.


© Universidad Internacional de La Rioja (UNIR)

Imagen 17: Archivo modificado/Resultado Esperado

Tema 3. Actividades 12