Extensión para VS Code

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

Instalación de VS Code.

Se procedió al acceso del sitio oficial de Visual Studio Code a través del enlace https://code.visualstudio.com/, para luego realizar la descarga del producto por medio de la opción download. Se seleccionó el instalador con versión para sistema operativo MS Windows 7, con esto se descargó el fichero VSCodeUserSetup-x64-1.33.0.exe.

[pic 1]

[pic 2]

Posteriormente, se procedió a la descarga de Node.js del sitio oficial en el enlace https://nodejs.org/es/ en la opción “Windows Installer”, en donde se descargó el fichero  node-v11.14.0-x64.msi.

[pic 3]

[pic 4]

La instalación de estos programas, sigue el estándar de Windows, presentando el asistente de instalación. No existió mayor dificultad para realizar este proceso.

Realizada la instalación de estas dos herramientas, se procedió a la verificación de la correcta instalación de Node.js.  Ejecutando la sentencia node –versión y node desde el terminal y se confirma que la instalación fue realizada correctamente.

[pic 5]

Confirmada la instalación de Node.js, se procedió a la instalación de los paquetes NPM: Yeoman, Generator-Code y TypeScript. Para esto se ejecutó la sentencia  “npm install -g yo generator-code typescript”.

Con esto quedaría listo el ambiente para el desarrollo de la extensión.

A continuación vamos a generar la estructura de nuestro proyecto de creación de una extensión para VS Code, con la ayuda de Yeoman instalado previamente.

Desde una terminal, ejecutamos el comando “yo code”, para indicar que usaremos el generador de extensiones para VS Code.

Aquí también se ingresa parámetros de configuración del proyecto, como son, nombre, identificador, descripción.

[pic 6]

[pic 7]

Con esto, se generó la carpeta gapline con la siguiente estructura:

[pic 8]

Con la generación de la estructura del proyecto, Yeoman generó el archivo package.json, pero con la generación automática se crearon propiedades con valor “helloWorld” por defecto, los cuales los sustituimos por el nombre de la función gapline.

[pic 9]

[pic 10]

De igual manera Yeoman generó el archivo extensión.ts de manera automática, en el cual se encuentra el código fuente de una extensión que presenta en pantalla un mensaje de “Hello world!”.

[pic 11]

El objetivo del ejercicio es realizar una extensión que permita ingresar una línea en blanco cada cierto número de líneas. Para ello se reemplazó el código fuente de este archivo por el proporcionado en la actividad. El archivo quedó de la siguiente manera:

[pic 12]

Con esto hemos terminado el desarrollo de la extensión. Para probar la funcionalidad, presionamos la tecla F5. Al realizar esto se levanta una nueva ventana de VS Code, en la cual se encuentra cargada la extensión. Para verificar la funcionalidad, seleccionamos un archivo plano (archivo.txt) previamente generado con 10 líneas de texto y señalamos todo el contenido.

[pic 13]

Acción seguida, abrimos el visor de comandos ejecutando la combinación de teclas Control/comando + shift + P y seleccionamos nuestra extensión (Gap Line).

[pic 14]

Se presenta un cuadro de diálogo solicitando el número de líneas después de las cuales se ingresará una línea en blanco, en el caso de nuestro ejemplo seleccionamos el 3.

[pic 15]

Y este es el resultado de la ejecución de nuestra extensión

[pic 16]

Comenta cada línea del código anterior teniendo en cuenta el propósito descrito al principio de este enunciado.

//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 es ejecutado

export function activate(context: vscode.ExtensionContext) {

    // El parámetro commandId del registerCommand debe ser igual al nombre de comando en package.json ==> extension.gapline

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

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

        var editor = vscode.window.activeTextEditor;

        // Si no encuentra el editor retornamos

        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  para pedir el número de líneas después de las cuales se insertará una línea en blanco

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

            // Asignamos el valor ingresado en la variable numberOfLines

...