Actividad 1

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)

Computación en el
13-12-2018
Cliente Web
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

Computación en el
13-12-2018
Cliente Web
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.

Computación en el
13-12-2018
Cliente Web
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.

Computación en el
13-12-2018
Cliente Web
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.

Computación en el
13-12-2018
Cliente Web
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.

Computación en el
13-12-2018
Cliente Web
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

Computación en el
13-12-2018
Cliente Web
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

Computación en el
13-12-2018
Cliente Web
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');

Computación en el
13-12-2018
Cliente Web
// 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.

Computación en el
13-12-2018
Cliente Web
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.

Computación en el
13-12-2018
Cliente Web
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.

Actividad 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Actividad 1

Enviado por

Direitos autorais:

Formatos disponíveis

Asignatura Datos del alumno Fecha

Apellidos: Cudco Pomagualli

Creación de una extensión para Visual

1.1. Descarga e Instalación de Node Js

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

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)

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)

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

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

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

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 12. Proceso de instalación de Yeoman y Generator-code

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

2. Creación del proyecto

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

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

Figura 15. Panel de configuraciones del proyecto.

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

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

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

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

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)

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

4. Edición de los ficheros

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

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

// Importa el módulo y lo referencia con el alias 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

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

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

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

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

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

// Obtiene el bloque de texto seleccionado del editor actual

// Muestra un cuadro de díalogo

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

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

// Se define un array vacio de cadenas de texto

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

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

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

// Implementa la funcionalidad para editar el texto

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

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

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

a. Modificación del fichero package.json

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

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