1.- Creación de una extensión para Visual Studio Code PDF

Preview

Summary

En este ejercicio se propone crear una extensión para el conocidísimo editor
de texto de Microsoft: Visual Studio Code. Esta extensión va a realizar una
tarea muy sencilla: insertar una línea en blanco cada N líneas....

Description

Materia: Computación en el cliente Web Profesor: Bárbaro Jorge Ferro Castro Nombre: Marlen Maldonado Velázquez Matricula: 5188484-448723

un Trabajo 1: Creación de u na extensión par araa Visual Studio Code. En este ejercicio se propone crear una extensión para el conocidísimo editor de texto de Microsoft: Visual Studio Code. Esta extensión va a realizar una tarea muy sencilla: insertar una línea en blanco cada N líneas.

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

Trabajo: Creación de una extensión para Visual Studio Code. Explicación de la instalación de software para la creación de este ejercicio: -

Visual Studio Code (VS Code). La instalación de este software no tuvo mayor problema, ya que fue sencillo y solamente se siguió el enlace que se encuentra en este documento (https://code.visualstudio.com/#alt-downloads), la versión descargada y utilizada es 1.55.2.

-

NodeJS. La instalación inicial fue la versión 16.0.0, la cual genero ciertos problemas que describiré más adelante, la versión con la cual se trabajo es 14.16.1 (versión recomendada).

Instalación de paquetes NPM Yeoman y Generator-Code: Para la instalación se presentaron ciertos problemas de compatibilidad, ya que inicialmente se descargó la versión 16.0.0 de NodeJS, en esta versión aparecieron diversos errores al tratar de instalar los paquetes de Yeoman y Generator Code:

© Universidad Internacional de La Rioja (UNIR)

Imagen 1. Instalación del paquete de Yeoman y Generator-code inicial v16.0.0

Actividades

1

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

Imagen 2. Error al ejecutar yo code.

© Universidad Internacional de La Rioja (UNIR)

Imagen 3. Activación en equipo la ejecución de scripts.

Actividades

2

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

Imagen 4. Errores generados al tratar de ejecutar el comando yo code, en VS Code (después de la activación de scripts). Después de estos problemas generados, se opto por descargar la versión recomendada de NodeJS 14.16.1, con la cual se realizo el mismo procedimiento, descrito en las pantallas anteriores y con ello se puedo realizo el esqueleto de la

© Universidad Internacional de La Rioja (UNIR)

extensión como se muestra a continuación:

Imagen 1. Configuración de Yeoman

Actividades

3

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

Se procedió a copiar el código descrito dentro de la actividad y se realización las modificaciones correspondientes, quedando de la siguiente manera: 'use strict'; El módulo 'vscode' contiene la API de extensibilidad de VS Code Se importa el módulo y hace referencia a él con el alias vscode con el código siguente: import * as vscode from 'vscode'; La variable “context:” pertenece a variable TypeScript, este método se llama cuando su extensión está activada, su extensión se activa la primera vez que se ejecuta el comando. export function activate(context: vscode.ExtensionContext) { vscode.commands.registerCommand: vincula un ID de y registra el nombre de la extensión la cual será llamada desde el archivo package.json. let disposable = vscode.commands.registerCommand('extension.gapline', () => { El editor activo es el que aparece en la pantalla para introducir el valor de líneas. var editor = vscode.window.activeTextEditor; Si la variable “editor” es diferente de verdadero no retorna nada. if (!editor) { return; } La variable “selection” guarda las líneas seleccionadas. var selection = editor.selection; la variable “text” Obtiene el texto del documento y se puede recuperar una subcadena proporcionando un rango, se toma el texto seleccionado.

© Universidad Internacional de La Rioja (UNIR)

var text = editor.document.getText(selection); Este apartado permite crear un recuadro de texto en el cual se introducirá el valor por el usuario. La variable “prompt” indica el texto que aparecerá debajo del recuadro mostrado en pantalla. La variable “value” contendrá el valor ingresado por el usuario.

Actividades

4

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

vscode.window.showInputBox({ prompt: '¿cada cuántas líneas quieres insertar? ' }).then(value => { La variable “NumberOfLines” será igual al valor de sí mismo más el valor contenido en la variable “value”. let numberOfLines = +value; Se crea la variable “textInChunks” (variable de TypeScript) que contendrá un Arreglo de tipo string. var textInChunks: Array = []; La propiedad split Divida una cadena en sub cadenas usando el separador especificado y lo devuelve como una matriz. La variable “text” se va a separar cada que encuentre un salto de línea del texto seleccionado y a su vez será guardada en la variable “currentLine” (variable TypeScript). La variable “lineIndex” corresponde a las veces que se encuentra el salto de línea dentro de la variable “text”. text.split('\n').forEach((currentLine: string, lineIndex) => { La propiedad “push” Agrega nuevos elementos al final de una matriz y devuelve la nueva longitud de la matriz. Al arreglo se le agregara la línea de texto guardada en la variable “currentLine”. textInChunks.push(currentLine); Si el residuo de la operación entre el número de líneas existentes en la variable “text” y el número de líneas es igual a 0, ya no será agregado nada, por ello se colocan las comillas simples.

© Universidad Internacional de La Rioja (UNIR)

if ((lineIndex+1) % numberOfLines === 0) textInChunks.push(''); }); La propiedad “join” agrega el elemento que se le indique entre las comillas simples, en este caso es el salto de línea. La variable “text” tomara el valor del arreglo “textInChunks”, agregándole un salto de línea.

Actividades

5

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

text = textInChunks.join('\n'); La propiedad “edit” realiza la edición en el documento asociado con este editor de texto. La función de devolución de llamada dada se invoca con un constructor de edición que debe usarse para realizar ediciones. editor.edit((editBuilder) => { La variable “range” crea un nuevo rango a partir de coordenadas numéricas. (nueva posición (línea inicial, carácter inicial), nueva posición (línea final, carácter final)) determina el rango de la variable de “selection”. var range = new vscode.Range( selection.start.line, 0, selection.end.line, Se va a devolver la línea de texto por el número de línea indicado. editor.document.lineAt(selection.end.line).text.length ); La propiedad “replace”, reemplaza una determinada región de texto con un nuevo valor. Puede usar \ r \ n o \ n en valor. La variable “range” indica el rango que será remplazado por la variable “text”, la variable “text” contendrá el texto con la agregación de la modificación programada. editBuilder.replace(range, text); }); }) });

© Universidad Internacional de La Rioja (UNIR)

A la variable “contex”, agregará el resultado obtenido dentro de las operaciones realizadas en “disposable”. context.subscriptions.push(disposable); } Cuando la extensión esta desactivada, se llamará este método: export function deactivate() { }

Actividades

6

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

Se realizo la modificación dentro del fichero tsconfig.json, quedando de la siguiente manera:

Imagen 2.- Modificación de la variable strict a false (como se indico en la descripción de la actividad) Cuando se encontraba con el valor en true, marcaba error de sintaxis en el archivo extensión.ts. También se cambió el nombre en la sección de activationEvents y comands al nombre

© Universidad Internacional de La Rioja (UNIR)

correspondiente de la extensión creada:

Actividades

7

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

Imagen 3.- Modificación en los comandos de activationEvents y comands

© Universidad Internacional de La Rioja (UNIR)

El resultado del ejercicio paso a paso se muestra en las imágenes siguientes:

Imagen 1.- Se presiono F5 para ejecutar la extensión, primero se seleccionó VS Code Extension Development y se abrió una ventana nueva de VS Code.

Actividades

8

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

Imagen 2.- Se abrió el archivo index.html, se seleccionaron las líneas (11-16) y se presionaron las teclas Ctrl+Shift+P para buscar y seleccionar la extensión creada.

© Universidad Internacional de La Rioja (UNIR)

Imagen 3.- Se coloco el valor para insertar la línea en blanco (cada 2 líneas colocar una línea) y se presionó la tecla Intro.

Actividades

9

Asignatura Computación en el Cliente Web

Datos del alumno Apellidos: Maldonado Velázquez Nombre: Marlen

Fecha

12/05/2021

Imagen 4.- Resultado final, después de presionar Intro en el teclado como se mostró

© Universidad Internacional de La Rioja (UNIR)

en el paso anterior.

Actividades

10...