Creación de una extensión para Visual Studio Code trabajo PDF

Preview

Summary

Tarea...

Description

Creación de una extensión para Visual Studio Code Introducción 1. Instalación de herramientas Primero vamos a hacer la instalación del software necesario para la creación de la extensión en Visual Studio Code.

Instalación de Visual Studio Code Entramos a la URL https://code.visualstudio.com/ y descargamos VS Code

Descargamos el archivo y luego lo ejecutamos para proceder con la instalación en nuestra computadora siguiendo el asistente de instalación. Al finalizar la instalación aparecerá la interfaz principal de VS Code.

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

Instalación de NodeJS Entramos a la URL https://nodejs.org/es/ y descargamos la última versión disponible de Node.js.

Una vez descargado el archivo de instalación, ejecutamos para proceder con la instalación en nuestra computadora siguiendo el asistente de instalación. Al finalizar la instalación, procedemos a certificar la instalación en una terminal con el comando node -v

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

Instalación de Yeoman y Generator-code Para instalar ambos paquetes, ejecuta la siguiente instrucción en un terminal: npm install -g yo generator-code. En esta línea, el comando npm instala de manera global (-g) el comando yo (que no es otra cosa que Yeoman) y el generador generatorcode (un generador para Yeoman que sirve para crear el esqueleto inicial de extensiones para VS Code).

Una vez ejecutada esta sentencia, aparecerá esta información en el editor de comandos:

2. Creación y configuración de la extensión para VS Code En este punto creamos el esqueleto del proyecto con Yeoman, con la siguiente sentencia usaré el generador de extensiones para VS Code, la sentencia es: yo code Al ejecutar la sentencia yo code nos preguntará el tipo de extensión, el nombre de la extensión, el identificador de la extensión y otras preguntas para las cuales daremos las respuestas que se muestran en la siguiente imagen:

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

3. Apertura del proyecto con VS Code y modificación de archivos Ejecutamos VS Code y abrimos la carpeta gapline que acabamos de crear con la opción de menú File / Open Folder…

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

Abrimos el archivo extension.ts el cual en la parte derecha nos aparecerá el código creado por default, un ejemplo de Hola Mundo!!

Este código lo reemplazaremos por el código de la actividad (sustituyendo el del ejemplo): 'use strict'; import * as vscode from 'vscode';

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

export function activate(context: vscode.ExtensionContext) { let

disposable

=

vscode.commands.registerCommand('extension.gapline', () => { var editor = vscode.window.activeTextEditor; if (!editor) { return; } var selection = editor.selection; var text = editor.document.getText(selection); vscode.window.showInputBox({

prompt:

'Lineas?' }).then(value => { let numberOfLines = +value; var textInChunks: Array = []; text.split('\n').forEach((currentLine: string, lineIndex) => { textInChunks.push(currentLine); if ((lineIndex+1) % numberOfLines === 0) textInChunks.push(''); }); text = textInChunks.join('\n'); editor.edit((editBuilder) => { var range = new vscode.Range( selection.start.line, 0, selection.end.line, editor.document.lineAt(selection.end.line).te xt.length ); editBuilder.replace(range, text); }); }) }); context.subscriptions.push(disposable); }

export function deactivate() { } 4. Ejercicios del proyecto

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)



Comentar (documentar) el archivo extension.ts

// Invoca el mode estricto de javascript 'use strict'; // Importa el módulo y lo referencia con el alias vscode import * as vscode from 'vscode'; // Este método es llamado cuando la extensión es activada // La extensión es activada 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 package.json ejemplo aqui: 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 regresa 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); /* Muestra un cuadro de dialogo con la palabra: Líneas? Pedimos el número de líneas a tomar en cuenta para insertar una línea en blanco*/ vscode.window.showInputBox({ prompt: '¿Cada cuantas Líneas agregar un espacio en blanco?' }).then(value => { // Asigna el valor del cuadro de texto que el usuario asigno a la variable numberOfLines let numberOfLines = +value; // Define un array vacío de cadenas de texto var textInChunks: Array = []; // 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 vacío 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)

// 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); } // El método es llamado cuando la extensión se desactiva export function deactivate() { }



Modificando el archivo package.json

Abrimos el archivo package.json y modificamos las líneas que digan helloWord (que inserta por defecto el generador code que hemos aplicado con Yeoman) por gapline. Teniendo mucho cuidado ya que este archivo contiene el comando para ejecutar nuestra extensión y el evento para activación.

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

Después de actualizar el archivo con las modificaciones nuestro archivo package.json quedaría de la siguiente manera.



Realizando pruebas a la extensión creada

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

Para realizar la prueba de la extensión (pulsamos la tecla F5 o seleccionamos la opción del menú Run Start Debugging) aquí se abrirá una nueva ventana de VS Code, abrimos un archivo de texto nuevo, escribimos algunas líneas de texto o copiamos algunas de internet.

Para realizar la prueba, seleccionamos el texto y pulsamos el comando CTRLSHIFTP, aquí aparecerá nuestras extensión creada GapLine.

Al seleccionar esta extensión GapLine, nos aparecerá una ventana o prompt con el texto ¿Cada cuantas Líneas agregar un espacio en blanco?.

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

Aquí escribimos el número de líneas que queremos que agregue un espacio en blanco de acuerdo con el texto que escribimos o seleccionamos, para la prueba escribimos el número 2.

Si nuestra extensión funciona correctamente, cada dos líneas agregara un espacio en blanco. Aquí el resultado, agrega una línea en blanco cada dos renglones.

5. Modificaciones adicionales al proyecto Para un mejor comportamiento de la extensión, realice algunas adecuaciones a continuación: Actualización en el archivo extension.ts Se agregaron llaves después de las condiciones del if Antes if ((lineIndex + 1) % numberOfLines === 0) textInChunks.push('');

Después if ((lineIndex + 1) % numberOfLines === 0) { textInChunks.push(''); }

Se agrego un ; que hacia falta en una llave Antes

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)

})

Después });

Actualización en el archivo package.json Se agrego el titulo para poder correr a la extensión GapLine Antes "title": "Hello Word"

Después

"title": "GapLine"

Actualización en el archivo tsconfig.json

También había unos errores dado que unas variables no estaban declaradas, investigue mas en la documentación de typescript y llegue con esta línea ya que aun con esos errores el código funcionaba y agregando una línea de código en el archivo tsconfig.json nos permite eliminar esos errores de las variables no declaradas.

"strictNullChecks": false, // – se agrego esta linea

Conclusión:

En particular siguiendo las instrucciones del archivo al pie de la letra esta actividad de extension fue un gran ejercicio para recordar ciertas habilidades de programacion e instalacion de herramientas que habia utilizado tiempo atrás, implementar los requerimientos y las necesidades para este trabajo tambien requirio cierto detalle de investigacion en lineas de codigo donde marcaba errores, pero en general siguiendo el documento llegue a la implementacion correcta para esta primera extensión.

TEMA 2 – Actividades

© Universidad Internacional de La Rioja (UNIR)...