CREACIÓN DE UNA EXTENSIÓN PARA VISUAL STUDIO CODE

CREACIÓN DE UNA EXTENSIÓN PARA VISUAL STUDIO CODE

El objetivo de este trabajo es crear una extensión para Visual Studio Code que insertará una línea en blanco cada N líneas.

Para ello seguiremos los siguientes pasos:

• Se debe empezar por descargar el programa, para ello nos dirigimos a la página oficial: https://code.visualstudio.com/ y seleccionamos la versión según nuestro sistema operativo, en mi caso es Windows.

• Luego de descárgalo comenzamos con la instalación y una vez finalizado abrimos el programa para verificar que no tenga ningún problema.

• De la misma manera procedemos a descargar e instalar NodeJS, para ello nos dirigimos a su página oficial: https://nodejs.org/en/download/current/.

• Para verificar que si se instaló entramos a consola, en este caso yo tengo el sistema operativo Windows, para ello presionamos las siguientes teclas (Windows+R), aparecerá una ventana pequeña donde escribiremos: cmd, le damos Aceptar y aparecerá una ventana negra donde digitaremos el siguiente código:  node –v. Como se aprecia en la imagen nos muestra la versión del node instalada.

• NodeJS es un motor JavaScript de lado de servidor que utiliza un modelo asíncrono y dirigido por eventos. Dentro de Node, el código se organiza por paquetes, así que al momento de trabajar con él va a ser necesario agregar más módulos y es aquí donde entra el gestor de paquetes Node Package Manager o abreviadamente npm, gracias a él podremos tener cualquier librería disponible con solo una línea de código, npm nos ayudará a administrar nuestros módulos, distribuir paquetes y agregar dependencias de una manera sencilla.

• En este caso será necesario instalar dos paquetes de npm (Yeoman y Generator-Code) y para ello ejecutaremos en el terminal de Windows la siguiente instrucción:

npm install –g yo generator-code typescript

• Una vez instalado ambos paquetes empezaremos a generar el esqueleto del proyecto con Yeoman y para ello digitaremos el siguiente comando: yo code, y seleccionaremos la opción TypeScript.

• Luego seguiremos llenando de acuerdo a las preguntas:

• Nombre de la extensión: Line Gapper
• Identificador de la extensión: gapline
• Descripción de la extensión: inserta una línea en blanco cada N líneas.
• Inicializar con repositorio git: No
• Package manager que se usará: npm

• Una  vez terminada la acción, nos dirigimos  C:\Users\ (esto es mi caso) y como se observa se ha creado la carpeta gapline.

• Abrimos el programa VS Code, hacemos clic en  el menú Archivo y seleccionamos la opción Abrir Carpeta, seleccionamos nuestra carpeta gapline y le damos enter.

[pic 1]

• Dentro del explorador de VS Code, buscamos el fichero extension.ts, que se encuentra en la carpeta src.

[pic 2]

Como se visualiza en la imagen el generador de Yeoman nos pone un código default muy conocido “Hola Mundo”.

• Este código lo reemplazaremos por este otro que tiene la funcionalidad  que solicita este ejercicio.

[pic 3]

'use strict';

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

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

        var editor = vscode.window.activeTextEditor;

        if (!editor) { return; }

        var selection = editor.selection;

        var text = editor.document.getText(selection);

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

            let numberOfLines = +value;

            var textInChunks: Array<string> = [];

            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).text.length

                );

                editBuilder.replace(range, text);

            });

        });

    });

    context.subscriptions.push(disposable);

}

export function deactivate() { }

• Guardamos los cambios y nos dirigimos al archivo tsconfig.json, aquí se debe verificar si la opción strict está marcada como false.[pic 4]

• De la misma manera guardamos los cambios y nos dirigimos al archivo package.json y observamos que el nombre de las funciones están con helloWolrd, que es la función por defecto que el generador code ha insertado.

[pic 5]

• Para ejecutar nuestra extensión tenemos que cambiar el nombre de la función en este caso es gapline.

• Se cambiaron los nombres:

"activationEvents": [

        "onCommand:gapline.gapline"],

                "commands": [

                        {

                                "command": "gapline.gapline",

                                "title": "Gapline "

                        }

• Guardamos todos los cambios y ejecutamos nuestra extensión, para ello podemos ir al menú Ejecutar y seleccionamos la opción de Iniciar Depuración o solo presionar la tecla F5, se abre una nueva de VS Code, abrimos un archivo nuevo y podemos escribir o copiar un texto, como se muestra en la imagen.

[pic 6]

• Seleccionamos el texto y presionamos las teclas (Ctrl+Ship+P), se abrirá el visor de comando y buscaremos nuestra extensión con el nombre que pusimos en title, en este caso yo le puse: Gapline, le damos clic y nos pedirá que ingresemos el número de líneas, para este ejemplo puse (4), presionamos tecla Enter y observamos que nuestra extensión está funcionando correctamente, mostrándonos los siguientes resultados.

[pic 7]

• Y como se puede apreciar cada 4 líneas se inserta una línea vacía, teniendo un resultado satisfactorio y limpio, de nuestra función,  cumpliendo con el objetivo de este ejercicio.

EJERCICIO FINAL:

Comentar las líneas código explicando para qué sirve; cabe recalcar que se hicieron algunas modificaciones al código propuesto inicialmente debido a que tenías algunos errores:

...