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

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

En esta práctica se propone crear una extensión para el editor de texto Visual Studio Code con una funcionalidad sencilla, insertar una línea en blanco cada N líneas.

Para la correcta ejecución de la práctica primero se procedió a instalar los paquetes software.

• Visual Studio Code: La versión instala es VSCodeSetup-x64-1.29.1
• NodeJs: La versión instalada corresponde a node-v11.4.0-x64

Ambas versiones correspondientes al Sistema Operativo Wondows. Una vez instalado los paquetes de software, a través del símbolo del sistema (CMD) se ejecutó la línea de comandos npm install -g yo generator-code, para instalar dos utilidades basadas en node: Yeoman y Generator Code.

Creación de la extensión

1.- A través del símbolo de sistemas ingresamos la línea de código “yo code”, presionamos enter y nos aparecerá la siguiente pantalla.

[pic 1]

2.- Seleccionamos la opción “”New Extensión (TypeScript)”, una vez realizada esta acción, Yeoman realizará varias preguntas.

• Nombre de la extensión,
• Nombre del identificador de la extensión,
• Descripción de la extensión,
• Habilitar TypeScript contenido en tsconfig.json, entre otras.[pic 2]

[pic 3][pic 4]

[pic 5]

Para el caso de la práctica se ingresó los datos proporcionado en la plataforma virtual.

3.- Una vez ejecutado lo ante expuesto, se ha generado una carpeta con la estructura base de archivos para la extensión de Visual Studio Code.

Apertura del proyecto con VS Code

Para abrir el proyecto lo hacemos desde la opción Abrir dentro del menú Archivo.

Código de la extensión

        Primer ejercicio

Para la ejecución de la primera parte de la práctica se procedió a copiar el texto proporcionado dentro del fichero extension.ts y comentar las líneas de código.

use strict';//activa la ejecución del código en modo estricto.

// 'vscode' -- contiene la API de extensabilidad de Visual Studio Code

//import * as vscode from 'vscode' -- importa el módulo y lo referencia con el alias

// export function activate(context: vscode.ExtensionContext) -- Este método es llamado cuando la extensión está activa

// La extensión se activa la primera vez que se ejecuta el comando

import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) {

  //El comando ha sido definido en el archivo package.json

  //Después proporciona la implementación del comando con registerCommand  

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

      //El código se ejecutará cada vez que se ejecute el comando

      var editor = vscode.window.activeTextEditor;

        // permite obtener la instancia que se está ejecutando actualmente

        if(!editor) { return; } // No retorna nada en caso de que no encuentre el editor

        //Permite obtener del editor actual el bloque de texto seleccionado

        var selection = editor.selection;

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

        // Muestra un cuadro de dialogo

        // Solicitamos el número de líneas a considerar para insertar una línea en blanco

        // Después implementa la funcionalidad con el valor obtenido

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

            let numberOfLines = +value;

         // A la variable numberOfLines le asigna el valor del cuadro de texto convirtiéndola a entero

            var textInChunks: Array<string> = []; // Define un array vacío de cadenas de texto

            // A partir de cada salto de línea divide el texto en un array para iterarlas            

            // Implementa la funcionalidad que agrega las líneas en blanco

            text.split('\n').forEach((currentLine: string, lineIndex) => {

                // Al array textInChuncks le agrega la línea actual

                textInChunks.push(currentLine);

                // Identifica si la posición en la que está concierne al número de líneas

                // Si corresponde permite el ingreso de un texto vacío al array  

                if ((lineIndex + 1) % numberOfLines === 0) textInChunks.push('');

...