Extension VSCODE

UNIR

Computación en el cliente web

Trabajo: Creación de una extensión para VS Code.

Docente: Gabriela Camacho Villaseñor

Alumno: Héctor Lobato Silva

Código extensión.ts:

import * as vscode from 'vscode';

//Importación de la libreria vscode

export function activate(context: vscode.ExtensionContext) { 

// Secrea y se exporta la funcion activate, que se encarga de iniciar la extensión

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

        // Se registra y almacena el comando "gapline" previamente especificado en package.json

        let options: vscode.InputBoxOptions = {

            prompt: 'Lineas?',

            placeHolder: 'Número de lineas para hacer el salto'

        } 

        // Se crea el json de configuracion para el input box

        const editor = vscode.window.activeTextEditor

        //Se inicializa el editor en la variable editor

        if ( editor ) {

        //Se comprueba que la variable editor no este vacia o nula,         

            const document = editor.document

            //Se inicializa la constante document a partir del valor de la llave document de la variable editor

            const lines: Array = document.getText().split('\n')

            //Se crea un array a partir del texto que tiene la variable document

            // tomando en cuenta la separacion por salto de linea

            vscode.window.showInputBox( options ).then( numberOfLines => {

            // Se renderiza el showInputBox que es el cuadrod de dialogo donde colocamos el json de conficuración

            // esta promesa nos regresa el valor ingresado en ella para poder trabajar con el. 

                if ( numberOfLines === undefined ) { return ; }

                // Verificamos que la variable numberOfLines no tenga un valor "undefined", de ser asi, se rompe la ejecución

                var newText = ""

                // Inicializamos la variable newText que almacenará el nuevo texto que crearemos con los nuevos saltos de linea.

                lines.forEach( ( line, lineIndex ) => {

                // Se hace la iteración de cada elemento del array lines.                    

                    newText += `${ line }`

                    // A la variable newText se le agrega el valor de line, que es el valor de la posicion actual del array.

                    if ( (lineIndex+1) % Number.parseInt( numberOfLines ) === 0 ) {

                    // A la variable lineIndex se le suma 1 y se parcea a entero la variable numberOfLines

                    // comprobamos que la división modular de estos 2 números sea igual a 0, esto quiere decir que es hora de

                    // agreggar un nuevo salto de linea.

                        newText += ' \n'

                        //Se agrega el salto de linea a la variable newText

                    }                   

                } )

                var textRange = new vscode.Range(

                    0, // Indice de linea donde iniciar a editar

                    document.lineAt( 0 ).range.start.character, // Indice de caracter donde empeazar a editar

                    document.lineCount - 1, // Indice de linea donde terminar de editar

                    document.lineAt( editor.document.lineCount - 1 ).range.end.character // Indice del ultimo caracter de la ultima linea a editar

                )

                //Se crea el rango del texto del editor que queremos que sea editable, en este caso es todo el texto.               

                editor.edit(function (editBuilder) {

                // Nuesra variable editor llama a la funcion edit que recibe una función anonuma que recibe un editBulder

                    editBuilder.replace(textRange, newText);

                    // Nuestro editBuilder reemplaza el texto de la variable editor por el valor de newText en el rango proporcionado

                    // por la variable textRange, en este caso es todo el texto

                });

            } )

        }

    });

    context.subscriptions.push(disposable);

    // Se agrega la variable disposable que contiene los comandos registrados a la variable context.

}

export function deactivate() {}

// Se exporta lña variable deactivate, que es la funcion que ese ejecuta al terminar la extension.

Código package.json:

{

    "name": "gapline",

    "displayName": "LineGapper",

    "description": "Salto de linea cada n lineas",

    "version": "0.0.1",

    "engines": {

        "vscode": "^1.40.0"

    },

    "categories": [

        "Other"

    ],

    "activationEvents": [

        "onCommand:extension.helloWorld",

...