VS Code

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

En esta entrada se describe el proceso de creación de una extensión para Visual Studio Code, como medio didáctico de aprendizaje para la programación en el cliente Web, más específicamente de la programación en JavaScript. La extensión descrita agregará una línea en blanco cada N  líneas de texto.

Contenido

  1. Instalación del software utilizado.
  2. Creación de la extensión.
  3. Ejecución de la aplicación.
  4. Explicación del código.
  5. Conclusiones.

Desarrollo

1. Instalación del software utilizado.

En orden precedente se describe en la siguiente tabla la instalación del software y su respectivo uso.

NombreDescripciónInstalación
VS CodeEditor de código fuente desarrollado por Microsoft con soporte para varios lenguajes entre ellos JavaScript y TypeScript.Se descarga el instalador de la página web del fabricante. https://code.visualstudio.com/Download  
NodeJsEs un entorno de ejecución para JavaScript basado en el motor de JavaScript V8 de Chrome.Su instalador se puede descargar de la siguiente URL. https://nodejs.org/es/download/  
NPMSistema de Gestión de paquetes por defecto de Node.js basado en JavaScript.Viene incluido con la instalación de Node.js. Para ver la documentación. https://docs.npmjs.com/
YeomanEs un sistema de generación de estructuras de proyectos para cualquier aplicación de forma ágil en cualquier lenguaje. Requiere andamios para cada proyecto.Se ejecuta el siguiente comando en una consola de comandos. npm install -g yo Donde:  (-g) de forma global Lo que quiere decir que mediante npm instalamos de forma global el paquete Yeoman “yo”.
Generator-codeAndamio específico para la creación de la estructura del proyecto para una extensión en VS Code.Se instala con el siguiente comando. npm install -g generator-code Instalando de forma global el paquete para la extensión de VS Code generator-code  
TypeScriptEs un súper conjunto de JavaScript que extiende este lenguaje añadiendo tipos de datos y objetos basados en clases. Utilizaremos su compilador.Para instalar su transcriptor, basta con ejecutar la siguiente línea de código sobre la consola de comandos. npm install -g typescript  
Tabla 1. Instalación de Herramientas para la creación de la extensión para VS Code.

2. Creación de la extensión.

  1. Ejecutamos la siguiente sentencia para generar el esqueleto del proyecto, una vez nos hallamos ubicado en el directorio donde queremos crear nuestro proyecto.
yo code

En la siguiente imagen se muestra las opciones elegidas para la creación.

Abrimos el proyecto con VS Code ejecutando en la terminal:

cd .\gapline\
code .

Obteniendo la siguiente estructura del proyecto.

Figura 2. Estructura del Proyecto en VS Code.

Agregamos el siguiente código en el archivo extension.ts

'use strict';
import * as vscode from 'vscode';

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<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() { }
	

Actualizamos el archivo package.json por los siguientes datos de nuestra extensión.

{
	"name": "gapline",
	"displayName": "Line Gapper",
	"description": "Extensión para VS Code - Computación en el cliente Web.",
	"version": "0.0.1",
	"engines": {
		"vscode": "^1.40.0"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"onCommand:extension.gapline"
	],
	"main": "./out/extension.js",
	"contributes": {
		"commands": [
			{
				"command": "extension.gapline",
				"title": "Line Gapper"
			}
		]
	},
	"scripts": {
		"vscode:prepublish": "npm run compile",
		"compile": "tsc -p ./",
		"watch": "tsc -watch -p ./",
		"pretest": "npm run compile",
		"test": "node ./out/test/runTest.js"
	},
	"devDependencies": {
		"@types/glob": "^7.1.1",
		"@types/mocha": "^5.2.7",
		"@types/node": "^12.11.7",
		"@types/vscode": "^1.40.0",
		"glob": "^7.1.5",
		"mocha": "^6.2.2",
		"typescript": "^3.6.4",
		"tslint": "^5.20.0",
		"vscode-test": "^1.2.2"
	}
}

3. Ejecución de la aplicación.

Una vez realizados los pasos anteriores, procedemos a ejecutar la aplicación presionando la tecla F5.

Se nos desplegará una nueva ventana de VS Code con la extensión precargada, en la cual agregamos texto para validar la funcionalidad.

Presionamos Ctrl + Shift + P y buscamos nuestra aplicación.

Una vez seleccionada la aplicación, se nos pedirá el número de líneas en la cual desea agregar un salto de línea al texto. Para el primer ejemplo agregamos un 5.

Y obtenemos el siguiente resultado.

4. Explicación del código

En este apartado explicaremos en detalle el código TypeScript que se encuentra en el archivo extensión.ts. Para ello conviene colocarlo de nuevo.

Línea 1. En esta línea llamamos al modo estricto en JavaScript, que permite ejecutar una variante de código JavaScript definido en el estándar ECMAScript 5, permitiendo encontrar más fácilmente errores que en un JavaScript normal dificilmente encontraríamos sino hasta la puesta en funcionamiento de la aplicación.

Línea 2. Importamos los archivos de configuración definidos para la extensión en VS Code.

Línea 4. Se crea una función de nombre actívate,  que puede se exporta export,  permitiendo ser llamada desde otros módulos y que recibe como parámetro un objeto del tipo context o contexto de la aplicación. Esta función termina en la línea 28.

Línea 5. Se declara una variable local let, de nombre disposable  que se le asigna un objeto con las propiedades que permiten registrar un comando que puede ser ejecutado invocando una combinación de teclas o a través del menú. Esta función es la que registra nuestra extensión en VS Code y nos permite llamarla para ser ejecutada.

Línea 6. Se declara una variable global var llamada editor,  que se inicializa con el parámetro vscode.window.activeTextEditor, el cual indica si el foco del objeto está en el editor de texto.

Línea 7. Estructura de control que escapará de la aplicación, o sea saldrá del flujo de código sin ejecutar nada más, teniendo en cuenta que el foco del objeto no esté en el editor de texto del VS Code.

Línea 8. Declara una variable global llamada selection, al cual se le asigna la propiedad editor.selection, la cual indica si está o no seleccionado un texto.

Línea 9. Se obtiene el texto seleccionado y se asigna a una variable llamada text.

Línea 10. Nos permiteobtenermediante desde un cuadro de texto el número de líneas que para nuestra aplicación, será utilizado para añadir un salto de línea. Esta función termina en la línea 25.

Líneas del 11 al 16. Permite insertar un salto de línea cada número de líneas insertado en la línea 10 con un incremento de 1. Eso quiere decir que si se inserta el número 5, la línea 6 estará vacía. Par eso debe recorrer todo el texto seleccionado mediante el ciclo forEach.

Líneas del 17 al 24. Esta función permite que al finalizar la inserción de los saltos de línea cada n líneas, se muestre el resultado de tal manera que todo el texto esté seleccionado.

Línea 27. Se agrega el resultado de la variable disposable como un nuevo elemento del array context.subscriptions.

Línea 30. Función no implementada.

5. Conclusiones

JavaScript se ha convertido en un lenguaje de programación muy importante en la actualidad y se ha extendido más allá del propósito de su nacimiento como lo es a las aplicaciones de escritorio.

TypeScript nació como una necesidad de aportar elementos que facilitaran el desarrollo de aplicaciones grandes, que al desarrollar en JavaScript puro, presentaba problemas para depurar el código. Hoy en día se una muy habitualmente como una herramienta poderosa para desarrollar más fácilmente una aplicación con tecnología JavaScript.

Visual Studio Code es una aplicación realizada en JavaScript con la ayuda del motor JavaScript V8 de Chrome y un gran ejemplo de las potencialidades de este lenguaje de programación.

El desarrollo de esta actividad me permitió conocer herramientas muy útiles para el desarrollo de aplicaciones no solo Web, sino también cualquier otro tipo como de escritorio y móvil. Definitivamente

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *